Mastering Flex Layout in JD Finance’s Dynamic UI: From Basics to Advanced Tricks

1. Introduction

Dynamic development using the Jue language (with a Vue‑like style) adopts standard Flex layout for view arrangement. List‑type views use tags such as

<scroll>

,

<slider>

,

<recycle-list>

, and

<waterfall>

to encapsulate child layout management, greatly improving development efficiency. Absolute layout and view visibility control are also supported.

When adapting this solution to the HarmonyOS platform, inconsistencies were found between Harmony’s Flex implementation and the W3C standard, causing UI breakage. Since Huawei does not plan to adjust its layout engine, the standard Flex layout was retained and the Yoga library (an open‑source cross‑platform layout engine from Facebook) was introduced to parse CSS, compute view positions and sizes, and apply them directly.

2. Flex Layout

Concepts

Container : a view with Flex layout enabled (equivalent to

display:flex

).

Item : a child view of a container.

Key concepts include the main axis (direction of item arrangement) and the cross axis (perpendicular to the main axis).

Common Container Properties

flex-direction

Sets the main‑axis direction; default is

column

.

<code>flex-direction: row | row-reverse | column | column-reverse;</code>

Example visualizations are provided in the original article.

flex-wrap

Defines how items wrap when they exceed the main‑axis space; default is

nowrap

.

<code>flex-wrap: nowrap | wrap | wrap-reverse;</code>

flex-flow

Shorthand for

flex-direction

and

flex-wrap

; default is

column nowrap

.

<code>flex-flow: column nowrap;</code>

justify-content

Aligns items along the main axis; default is

flex-start

.

<code>justify-content: flex-start | center | space-between | space-around | space-evenly | flex-end;</code>

align-items

Aligns items along the cross axis; default is

stretch

.

<code>align-items: flex-start | center | flex-end | stretch;</code>

align-content

Aligns multiple rows (or columns) on the cross axis; not effective for a single line.

<code>align-content: flex-start | flex-end | center | space-between | space-around | stretch;</code>

align-self

Overrides the container’s

align-items

for a specific item.

<code>align-self: auto | flex-start | flex-end | center | stretch;</code>

Common Item Properties

flex-grow

Proportion of remaining space an item occupies on the main axis (default 0).

<code>&lt;div style="flex-direction: row;height: 60px;width: 300px;background-color: blue;"&gt;
  &lt;div style="width:100px;flex-grow:1;height:40px;background-color:red;"&gt;&lt;/div&gt;
  &lt;div style="width:50px;flex-grow:2;height:40px;background-color:green;"&gt;&lt;/div&gt;
&lt;/div&gt;</code>

flex-shrink

Factor by which an item shrinks when space is insufficient (default 0).

<code>&lt;div style="flex-direction: row;height: 60px;width: 300px;background-color: blue;"&gt;
  &lt;div style="width:300px;flex-shrink:1;height:40px;background-color:red;"&gt;&lt;/div&gt;
  &lt;div style="width:300px;flex-shrink:2;height:40px;background-color:green;"&gt;&lt;/div&gt;
&lt;/div&gt;</code>

flex-basis

Initial main‑axis size of an item before free space distribution (default auto).

<code>&lt;div style="flex-direction: row;height: 60px;width: 300px;background-color: blue;padding-top:10px;"&gt;
  &lt;div style="width:150px;flex-grow:1;height:40px;background-color:red;"&gt;&lt;/div&gt;
  &lt;div style="width:150px;flex-grow:1;flex-basis:50px;height:40px;background-color:green;"&gt;&lt;/div&gt;
&lt;/div&gt;</code>

flex

Shorthand for

flex-grow

,

flex-shrink

, and

flex-basis

.

<code>flex: none | [flex-grow flex-shrink flex-basis]</code>

Note: Using

flex:1

is equivalent to

flex:1 1 auto

; avoid unnecessary constraints.

3. List Layouts

The framework provides tags such as

<scroll>

,

<slider>

,

<recycle-list>

,

<waterfall>

,

<lego-container>

, and

<feed-container>

for various list‑type presentations, as well as

<page-container>

and

<tab-bar>

for multi‑page management.

4. Absolute Layout

Absolute positioning removes a view from the normal flow, allowing fixed placement.

<code>.item {
  position: absolute;
  right: 10px;
  bottom: 20px;
  width: 50px;
  height: 50px;
}</code>

The position is relative to the parent view.

5. View Visibility Control

Common methods to show or hide views:

v-if : conditional rendering (true/false).

display :

flex

or

none

(element remains in DOM but is removed from layout).

v-show : maps to

display:flex

or

display:none

.

visibility :

visible

or

hidden

(keeps layout space).

opacity :

0

or

1

(transparent but layout‑participating; iOS requires opacity > 0.1 to be visible).

overflow :

hidden

or

visible

(controls clipping of child overflow; default differs across platforms).

The framework aims to smooth cross‑platform differences while preserving native behaviors where necessary.

6. Layout Issue Analysis

Common questions encountered in JD Finance’s 200+ pages using this dynamic framework:

Why does an item have width even without explicit width or children? – Because the default main axis is

column

and

align-items:stretch

makes items fill the container.

Why does an item’s width differ from the set value? – Conflicts with

flex:1

,

flex-grow

, or

flex-shrink

can cause stretching or compression.

What ultimately determines an item’s size? – The hierarchy of container settings, item’s own size, child‑driven expansion, flex properties, and finally

max-width

/

max-height

which have the highest priority.

How to allocate container space proportionally among items? – Set all items’

flex-basis

to 0 and distribute space using

flex-grow

ratios.

How to approach a complex view? – Identify whether the view knows its dimensions, can inherit from the parent, can be expanded by children, or requires max‑size constraints; then resolve conflicts and apply a clear layout strategy.

7. Conclusion

The dynamic framework integrates JavaScript, iOS, Android, HarmonyOS, Java, Vue, Node, Webpack, and more, offering a unified solution for cross‑platform UI development. Readers are encouraged to explore specific implementations and engage with the community for deeper insights.