BestHub
Sign in
Tagged articles
40 articles
Page 1 of 1
IT Services Circle
IT Services Circle
Jan 17, 2026 · Frontend Development

10 Must‑Know CSS Layout Techniques for 2026

In 2026 front‑end engineering demands performance, maintainability, clean architecture and design‑system scalability, and modern CSS now provides powerful tools—Grid, Flexbox, Container Queries, Subgrid, clamp/min/max, logical properties, aspect‑ratio, and more—to dramatically reduce JavaScript usage while delivering faster, more reliable user experiences.

CSSFlexboxResponsive Design
0 likes · 11 min read
10 Must‑Know CSS Layout Techniques for 2026
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 22, 2025 · Frontend Development

Responsive Card Layout with Flexbox: Solving Alignment and Wrapping Issues

This article explains how to create a responsive grid of fixed‑width cards using CSS Flexbox, discusses common alignment problems when the number of cards changes, and presents several solutions—including adjusting justify‑content, using nth‑child selectors, and wrapping the container in an overflow‑hidden parent—to achieve consistent layout across varying screen sizes.

CSSFlexboxfrontend
0 likes · 6 min read
Responsive Card Layout with Flexbox: Solving Alignment and Wrapping Issues
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 30, 2024 · Frontend Development

Implementing Chat History Loading in a WeChat Mini‑Program Using Flex Column‑Reverse and a Koa WebSocket Server

This article explains how to solve the common problem of loading historical chat records in a WeChat mini‑program by using a two‑line CSS flex column‑reverse trick, handling edge cases such as limited data and scroll‑view issues, and provides a complete Koa WebSocket backend implementation with full code examples.

ChatFlexboxKoa
0 likes · 9 min read
Implementing Chat History Loading in a WeChat Mini‑Program Using Flex Column‑Reverse and a Koa WebSocket Server
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 6, 2024 · Frontend Development

Comprehensive Guide to Modern CSS Layout Techniques: Flexbox, Grid, and Common Patterns

This article provides a detailed tutorial on implementing various modern web layout techniques—including horizontal‑vertical centering, equal‑height columns, sticky footers, equal‑distribution columns, the Holy Grail layout, 12‑column grids, justified spacing, and responsive sizing with clamp()—using CSS Flexbox and Grid with practical code examples.

CSSFlexboxResponsive Design
0 likes · 29 min read
Comprehensive Guide to Modern CSS Layout Techniques: Flexbox, Grid, and Common Patterns
php Courses
php Courses
May 1, 2023 · Frontend Development

Pure CSS3 Image Carousel Using Flexbox and Keyframe Animation

This tutorial explains how to build a pure‑CSS3 image carousel with a clean, minimalist look by using Flexbox layout and @keyframes animation, providing complete HTML and CSS code that runs without any JavaScript, making it a handy reference for front‑end developers.

FlexboxImage Slidercss3
0 likes · 3 min read
Pure CSS3 Image Carousel Using Flexbox and Keyframe Animation
Java Architect Essentials
Java Architect Essentials
Feb 26, 2023 · Frontend Development

Comprehensive uni‑app Guide: Overview, Environment Setup, and Development Practices

This article provides a detailed introduction to uni‑app, a Vue‑based cross‑platform front‑end framework, covering its core concepts, advantages, environment installation with HBuilder X and vue‑cli, project creation, platform‑specific build commands, Flex layout basics, and background‑image handling for various targets.

DevelopmentFlexboxHBuilderX
0 likes · 18 min read
Comprehensive uni‑app Guide: Overview, Environment Setup, and Development Practices
Java Backend Technology
Java Backend Technology
Jan 11, 2023 · Frontend Development

Master uni-app: Build Cross‑Platform Apps with One Codebase

This guide introduces uni-app—a Vue‑based framework that lets developers write a single codebase and deploy to iOS, Android, H5, and various mini‑programs—covers its key advantages, environment setup with HBuilder X or vue‑cli, project creation, platform‑specific building, Flex layout, and background‑image handling.

FlexboxMobileVue
0 likes · 19 min read
Master uni-app: Build Cross‑Platform Apps with One Codebase
Youku Technology
Youku Technology
Dec 16, 2022 · Frontend Development

GaiaX Layout Solution: Flexbox and Stretch Engine Analysis

GaiaX, Alibaba Entertainment’s cross‑platform dynamic UI framework, adopts Flexbox implemented with the Rust‑based Stretch engine to deliver millisecond‑level layout latency on phones, tablets, OTT, Macs and IoT devices, while fixing iOS 32‑bit crashes, redefining aspect‑ratio logic, adding thread‑safe wrappers and extensive tests, and open‑sourcing the extended library.

FlexboxGaiaXLayout Engine
0 likes · 18 min read
GaiaX Layout Solution: Flexbox and Stretch Engine Analysis
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Apr 10, 2022 · Frontend Development

Master Front-End Layouts: From Centering to Multi-Column Designs

This article systematically explores front‑end page layout techniques, covering common layout types, their best‑practice implementations with CSS (including flex, grid, float, and positioning), detailed Less mixins for vertical, horizontal, and planar centering, and comprehensive solutions for two‑, three‑, and multi‑column layouts across desktop and mobile scenarios.

CSSCenteringFlexbox
0 likes · 25 min read
Master Front-End Layouts: From Centering to Multi-Column Designs
HomeTech
HomeTech
Mar 10, 2022 · Frontend Development

Understanding Flexbox Layout and Its Container Properties

This article explains the fundamentals of the CSS Flexible Box Module (Flexbox), describing main and cross axes, and provides detailed guidance on the six container properties—flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content—along with code examples and visual illustrations.

CSSFlexboxWeb Development
0 likes · 8 min read
Understanding Flexbox Layout and Its Container Properties
php Courses
php Courses
Sep 18, 2021 · Frontend Development

Pure CSS Sun‑Earth‑Moon Orbital Animation Tutorial

This article demonstrates how to create a pure‑CSS animation of the Sun, Earth and Moon orbital motion using simple HTML divs, Flexbox/Grid layout, gradient colors, and CSS keyframe animations, with full source code and styling details provided.

CSSFlexboxHTML
0 likes · 6 min read
Pure CSS Sun‑Earth‑Moon Orbital Animation Tutorial
LOFTER Tech Team
LOFTER Tech Team
Aug 25, 2021 · Frontend Development

Technical Summary of H5 Animation Techniques for NetEase LOFTER

This article presents a comprehensive technical summary of various H5 animation solutions—including pure CSS, dynamics.js, random motion, frame animation, lottie, video and APNG/WebP—along with mobile adaptation strategies using flexbox and practical video preloading methods for improved performance and user experience.

CanvasFlexboxJavaScript animation
0 likes · 18 min read
Technical Summary of H5 Animation Techniques for NetEase LOFTER
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 11, 2021 · Frontend Development

Unlocking Flexbox Secrets: Advanced Layout Techniques and Calculations

This comprehensive guide uncovers the often‑overlooked intricacies of Flexbox, from axis terminology and logical properties to flex‑grow, flex‑shrink calculations, alignment nuances, and practical examples, helping developers avoid common pitfalls and create robust, responsive UI layouts.

CSS LayoutFlexboxFlexbox Calculations
0 likes · 32 min read
Unlocking Flexbox Secrets: Advanced Layout Techniques and Calculations
Beike Product & Technology
Beike Product & Technology
Dec 19, 2020 · Frontend Development

Master Mobile H5 Layout: 5 Proven Adaptation Techniques Explained

This guide compares five mobile H5 layout adaptation methods—percentage, rem, vw/vh, media queries, and flexbox—detailing their principles, implementation code, advantages, disadvantages, and practical tips to help developers choose the most suitable solution for responsive design.

CSSFlexboxResponsive Design
0 likes · 26 min read
Master Mobile H5 Layout: 5 Proven Adaptation Techniques Explained
Taobao Frontend Technology
Taobao Frontend Technology
Jul 20, 2020 · Frontend Development

Unlock Modern CSS Layouts: Centering, Grid, Flexbox, and Responsive Techniques

This article explores essential CSS layout patterns—including horizontal‑vertical centering, equal‑height sections, sticky footers, equal‑column grids, the Holy Grail layout, 12‑column systems, space‑between justification, the clamp() function, and logo alignment—showing practical Flexbox and Grid solutions with code examples and live demos.

CSSFlexboxgrid
0 likes · 27 min read
Unlock Modern CSS Layouts: Centering, Grid, Flexbox, and Responsive Techniques
Alibaba Cloud Developer
Alibaba Cloud Developer
Jul 20, 2020 · Frontend Development

Master Modern CSS Layouts: Centering, Grids, Flexbox, and More

This comprehensive guide walks you through essential CSS layout techniques—including horizontal and vertical centering, equal‑height columns, sticky footers, 12‑column grids, holy‑grail layouts, and responsive design—using Flexbox and Grid with clear code examples and visual demos.

CSSFlexboxResponsive Design
0 likes · 25 min read
Master Modern CSS Layouts: Centering, Grids, Flexbox, and More
Youzan Coder
Youzan Coder
Jun 10, 2020 · Mobile Development

Building a Declarative UI Framework for UIKit in Swift

The article presents a Swift‑based declarative UI framework for UIKit that replaces AutoLayout with a flexible, CSS‑like style system, reactive state handling, and extensible layout nodes, enabling cleaner code, efficient animated lists, and improved development speed while planning future optimizations such as dirty‑checking and virtual layouts.

Declarative UIFlexboxSwift
0 likes · 11 min read
Building a Declarative UI Framework for UIKit in Swift
21CTO
21CTO
Jul 6, 2019 · Mobile Development

How Zhihu Accelerated Mobile Ad Updates with the Morph DSL Native+ Solution

Zhihu’s Morph dynamic solution, built on a Flexbox‑based DSL and JSON, enabled rapid, cross‑platform updates of mobile ad cards, dramatically reducing rollout time from eight days to one and supporting over 70 styles with minimal impact on app size and performance.

Ad TechDSLDynamic UI
0 likes · 20 min read
How Zhihu Accelerated Mobile Ad Updates with the Morph DSL Native+ Solution
Qunar Tech Salon
Qunar Tech Salon
Jun 4, 2019 · Mobile Development

Litho: Facebook’s Declarative Android UI Framework – Overview, Usage, and Principles

Litho is a Facebook‑originated declarative framework for building high‑performance Android UI, replacing XML layouts with component‑based code, leveraging Yoga for async layout, flattening view hierarchies, and offering fine‑grained reuse to dramatically improve RecyclerView scrolling speed and memory consumption.

AndroidComponentDeclarative UI
0 likes · 17 min read
Litho: Facebook’s Declarative Android UI Framework – Overview, Usage, and Principles
Aotu Lab
Aotu Lab
Apr 14, 2017 · Frontend Development

How to Create a Sticky Footer That Stays at the Bottom on Any Page

This article explains the sticky‑footer problem when page content is short, defines the sticky‑footer effect, and provides four CSS‑based solutions—absolute positioning, calc(), table layout, and Flexbox—detailing their code, advantages, and drawbacks for responsive web design.

FlexboxResponsive DesignSticky Footer
0 likes · 6 min read
How to Create a Sticky Footer That Stays at the Bottom on Any Page
Tencent Music Tech Team
Tencent Music Tech Team
Mar 17, 2017 · Mobile Development

Introduction to Yoga Layout Engine, Flexbox Basics, and Android Integration

Yoga, Facebook’s cross‑platform C‑based Flexbox layout engine with Java, C#, and Objective‑C bindings, lets developers define UI hierarchies using Flexbox properties, compile it via Buck or import a Gradle module, calculate node positions in Android, and manually apply them to Views, offering cross‑platform consistency but requiring extra integration effort.

AndroidBuckFlexbox
0 likes · 17 min read
Introduction to Yoga Layout Engine, Flexbox Basics, and Android Integration