layout | BestHub

Sohu Tech Products

Apr 16, 2025 · Frontend Development

Top 10 New CSS Features in 2024 and Their Practical Use Cases

The 2024 CSS update introduces ten powerful features—scrollbar‑gutter, scrollbar‑color, ::target-text, ruby‑align/position, relative color syntax with light‑dark(), native details accordions, content‑visibility, font‑size‑adjust, transition‑behavior, @property with step‑value functions, and offset‑path/position—enabling smoother layouts, dynamic theming, performance gains, richer typography, and complex animations without JavaScript.

Browser CompatibilityCSSWeb Development

0 likes · 10 min read

Top 10 New CSS Features in 2024 and Their Practical Use Cases

Rare Earth Juejin Tech Community

Mar 5, 2025 · Frontend Development

Making position:fixed Relative to Parent Elements with CSS Techniques

This article explains why CSS position:fixed normally anchors to the viewport, describes the challenges in complex layouts, and demonstrates several CSS tricks—such as using transform, perspective, filter, backdrop-filter, and contain:paint—to make a fixed element position relative to a specific parent, while also covering best‑practice considerations.

CSSWeb Developmentfrontend

0 likes · 8 min read

Making position:fixed Relative to Parent Elements with CSS Techniques

Rare Earth Juejin Tech Community

Feb 14, 2025 · Frontend Development

A Comprehensive Guide to CSS Grid Layout: Fundamentals, Advanced Techniques, and Practical Examples

This article provides an in‑depth tutorial on CSS Grid, covering its basic syntax, column and row definitions, fractional units, gaps, implicit and explicit tracks, repeat functions, item placement, grid areas, accessibility concerns, and includes multiple code demos to illustrate each concept.

CSS GridResponsive DesignWeb Development

0 likes · 11 min read

A Comprehensive Guide to CSS Grid Layout: Fundamentals, Advanced Techniques, and Practical Examples

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.

CSSFlexboxResponsive Design

0 likes · 6 min read

Responsive Card Layout with Flexbox: Solving Alignment and Wrapping Issues

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

Sohu Tech Products

Jan 8, 2025 · Mobile Development

Understanding Jetpack Compose Layout Process: Composition, Measurement, and Modifier Nodes

Jetpack Compose’s layout process consists of three steps—measuring children, deciding the parent’s size, and placing children—driven by a MeasurePolicy that respects explicit Constraints, while Modifier nodes adjust those constraints and intrinsic measurements provide size hints, enabling efficient, declarative UI rendering.

Android UIJetpack ComposeKotlin

0 likes · 17 min read

Understanding Jetpack Compose Layout Process: Composition, Measurement, and Modifier Nodes

Rare Earth Juejin Tech Community

Jan 1, 2025 · Frontend Development

Understanding the CSS Box Model and Block Formatting Context (BFC)

This article explains the CSS box model, the differences between content-box and border-box sizing, introduces the concept of Block Formatting Context (BFC), shows how to trigger BFC with various CSS properties, and demonstrates practical layout solutions with code examples.

BFCCSSbox model

0 likes · 14 min read

Understanding the CSS Box Model and Block Formatting Context (BFC)

Rare Earth Juejin Tech Community

Dec 30, 2024 · Frontend Development

Wujie Micro Frontend Implementation Guide

This article details a practical implementation of the Wujie micro‑frontend framework across three Vue‑based management systems, covering preparation of the host app, login state handling, layout selection, event bus integration, network request management, UI adjustments, and shared state synchronization, with code snippets and lessons learned.

Vueevent busfrontend

0 likes · 20 min read

Wujie Micro Frontend Implementation Guide

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

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.

CSSFlexboxResponsive Design

0 likes · 9 min read

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

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

Sep 6, 2024 · Frontend Development

Comprehensive Guide to CSS Grid Layout: Concepts, Syntax, and Practical Examples

This article provides an in‑depth tutorial on CSS Grid layout, covering its advantages over Flexbox, compatibility, container setup, row and column definitions, sizing units, gaps, element positioning, naming conventions, area declarations, auto‑flow behavior, alignment properties, and automatic placement with numerous code examples.

CSSCSS GridResponsive Design

0 likes · 25 min read

Comprehensive Guide to CSS Grid Layout: Concepts, Syntax, and Practical Examples

DaTaobao Tech

Mar 8, 2024 · Frontend Development

CSS Grid Layout for E‑commerce Product Cards

The article shows how using CSS Grid instead of nested Flex containers can halve the HTML and CSS needed for e‑commerce product cards by defining rows and columns, simplifying markup to a few elements while preserving layout for images, titles, prices, badges, and actions.

CSSCSS GridFront-end

0 likes · 9 min read

CSS Grid Layout for E‑commerce Product Cards

IT Services Circle

Oct 11, 2023 · Frontend Development

Common CSS Design Mistakes and Their Implications

This article reviews several noteworthy CSS design mistakes—such as the misuse of !important, confusing z-index behavior, margin collapse, ambiguous color functions, and naming of border‑radius—explaining why they are problematic and suggesting clearer alternatives for better front‑end development.

CSScolor functionsdesign mistakes

0 likes · 6 min read

Common CSS Design Mistakes and Their Implications

Kuaishou Frontend Engineering

Sep 26, 2023 · Mobile Development

Why Text Gets Cut Off in React Native – Android Measurement Deep Dive & Fixes

This article analyzes the long‑standing React Native text‑truncation issue, explains Android’s text‑measurement architecture—including Spanned, TextPaint, Layout and TextLine—examines two common truncation cases, provides concrete fixes, and proposes a runtime monitoring solution to detect and log such problems.

React NativeText MeasurementText Truncation

0 likes · 24 min read

Why Text Gets Cut Off in React Native – Android Measurement Deep Dive & Fixes

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.

FlexboxResponsive Designadaptive layout

0 likes · 8 min read

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

Sohu Tech Products

Dec 28, 2022 · Frontend Development

Using the CSS :has Selector to Style Parent Elements Based on Child Content

This article explains the new CSS :has parent selector, showing how to conditionally apply styles to parent elements based on the presence of child elements such as images, links, or form inputs, and provides multiple practical examples and browser support details.

:has() selectorCSSWeb Development

0 likes · 10 min read

Using the CSS :has Selector to Style Parent Elements Based on Child Content

JD Retail Technology

Dec 21, 2022 · Frontend Development

Introduction and Design of JD Waterdrop Low-Code Canvas

The article presents an overview of JD's Waterdrop low-code platform, detailing the canvas concept, types, research on existing solutions, development goals, design architecture, adaptive layout algorithms, common layout patterns, and future plans for enhancing the front‑end building experience.

CanvasUI Designdrag-and-drop

0 likes · 11 min read

Introduction and Design of JD Waterdrop Low-Code Canvas

NetEase Cloud Music Tech Team

Jul 27, 2022 · Mobile Development

iOS RTL (Right‑to‑Left) Language Adaptation: Challenges and Solutions

The article discusses challenges and solutions for adapting iOS apps to right‑to‑left languages like Arabic, covering UI mirroring, layout adjustments using leading/trailing constraints, image flipping, text alignment and attributed strings, Unicode direction controls, collection view handling, RTL‑aware insets, navigation gestures, number formatting, and in‑app language switching with practical code examples.

RTLSwiftUIKit

0 likes · 18 min read

iOS RTL (Right‑to‑Left) Language Adaptation: Challenges and Solutions

Sohu Tech Products

Jul 20, 2022 · Mobile Development

Common Android Development Pitfalls and Solutions: Soft Keyboard, Merge Tag, LinearLayout, and Fragment Issues

This article discusses several frequent Android development challenges—including hiding the soft keyboard after activity finish, proper use of the merge tag, LinearLayout weight handling, and numerous Fragment lifecycle pitfalls—providing practical solutions, code snippets, and best‑practice recommendations to improve app stability and UI behavior.

FragmentLifecycleSoftKeyboard

0 likes · 13 min read

Common Android Development Pitfalls and Solutions: Soft Keyboard, Merge Tag, LinearLayout, and Fragment Issues