BestHub
Sign in
Tag

Flexbox

0 views collected around this technical thread.

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
Jan 14, 2025 · Frontend Development

Handling Overflow in Flexbox: Preventing Fixed-Width Elements from Being Crushed

This article explains why a flex:1 element can cause a fixed-width sibling to be squeezed when its child exceeds the container width, and presents solutions such as using overflow:hidden, width:0, min-width:0, and analogous vertical-direction fixes.

CSSFlexboxOverflow
0 likes · 8 min read
Handling Overflow in Flexbox: Preventing Fixed-Width Elements from Being Crushed
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 27, 2024 · Frontend Development

Creating a Responsive Masonry Layout with CSS Columns, Grid, and Flexbox

This article explains how to build a responsive, order‑agnostic masonry (waterfall) layout using CSS columns, and compares it with grid and flexbox approaches, providing concise code examples, responsive tweaks with @media, and discusses advantages, drawbacks, and browser compatibility.

CSSColumnsFlexbox
0 likes · 6 min read
Creating a Responsive Masonry Layout with CSS Columns, Grid, and Flexbox
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 29, 2024 · Frontend Development

Elegant Centering and Advanced Layout Techniques with margin:auto in Flexbox

This article explores how to achieve horizontal and vertical centering in CSS Flexbox using justify-content, align-items, and the more concise margin:auto approach, presenting multiple practical examples, code snippets, and advanced layout scenarios such as partial clustering, equal-width distribution, and dynamic spacing calculations.

Flexboxfrontendlayout
0 likes · 17 min read
Elegant Centering and Advanced Layout Techniques with margin:auto in Flexbox
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 30, 2024 · Frontend Development

Flexbox vs Grid: Layout Techniques, Code Samples, and Responsive Design

This article compares Flexbox and CSS Grid for creating grid‑style, backend admin, and responsive layouts, provides complete HTML/CSS code examples for each approach, discusses compatibility issues, and explains when to choose one technique over the other.

CSSFlexboxfrontend
0 likes · 9 min read
Flexbox vs Grid: Layout Techniques, Code Samples, and Responsive Design
JD Tech Talk
JD Tech Talk
Sep 18, 2024 · Frontend Development

Flex Layout and Dynamic UI Development in JD Finance App Using the Yoga Engine

This article introduces the use of Flex layout and the Yoga cross‑platform layout engine for dynamic UI development in the JD Finance app, covering container and item concepts, common Flex properties, list and absolute layouts, visibility control, and practical troubleshooting tips.

FlexboxUIYoga
0 likes · 21 min read
Flex Layout and Dynamic UI Development in JD Finance App Using the Yoga Engine
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.

CSSFlexboxWeb Layout
0 likes · 29 min read
Comprehensive Guide to Modern CSS Layout Techniques: Flexbox, Grid, and Common Patterns
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 24, 2023 · Frontend Development

Screen Size Compatibility and Responsive Design in Front-End Development

This article explains the challenges of screen‑size compatibility for front‑end developers, analyzes current device resolutions and aspect ratios, and provides practical solutions such as viewport meta tags, media queries, adaptive units, responsive layouts, device simulation tools, and safe‑area handling for modern browsers and mobile devices.

Flexboxgridmedia queries
0 likes · 17 min read
Screen Size Compatibility and Responsive Design in Front-End Development
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 12, 2023 · Frontend Development

Implementing a Waterfall Layout with Flex in a Uni‑App

This article explains how to create a two‑column waterfall (masonry) layout in a Uni‑App using Flexbox, covering the visual design, CSS styling, data handling, dynamic loading, height calculation, and tab‑switch integration with complete code examples.

CSSFlexboxJavaScript
0 likes · 8 min read
Implementing a Waterfall Layout with Flex in a Uni‑App
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 3, 2023 · Frontend Development

Front-End Layout Techniques: Adaptive, Responsive, and Common Layout Methods

This article explains front‑end layout concepts, distinguishing adaptive and responsive designs, lists common mobile screen dimensions, and details practical techniques such as percentage layouts, media queries, rem/vw/vh units, flexbox, as well as classic Holy Grail and double‑wing layouts.

Flexboxadaptive layoutlayout
0 likes · 8 min read
Front-End Layout Techniques: Adaptive, Responsive, and Common Layout Methods
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.

CSS3FlexboxImage Slider
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.

Cross-PlatformFlexboxHBuilderX
0 likes · 18 min read
Comprehensive uni‑app Guide: Overview, Environment Setup, and Development Practices
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.

FlexboxGaiaXRust
0 likes · 18 min read
GaiaX Layout Solution: Flexbox and Stretch Engine Analysis
Youku Technology
Youku Technology
Apr 21, 2022 · Mobile Development

GaiaX: Youku Cross-Platform Dynamic Template Engine Technical Solution

GaiaX, Youku’s cross‑platform dynamic template engine launched in 2019, uses a Rust‑based StretchKit layout core, JSON‑defined components and CSS‑flexbox to replace JS‑bridge solutions like Weex, delivering native‑level performance, cutting component development time by up to 50 % and boosting R&D efficiency by roughly 30 % across 15+ teams.

Cross-PlatformFlexboxGaiaX
0 likes · 10 min read
GaiaX: Youku Cross-Platform Dynamic Template Engine Technical Solution
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.

CSSFlexboxanimation
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.

CSS animationFlexboxJavaScript animation
0 likes · 18 min read
Technical Summary of H5 Animation Techniques for NetEase LOFTER
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 UIFlexboxReactive Programming
0 likes · 11 min read
Building a Declarative UI Framework for UIKit in Swift