Using Flexbox to arrange DOM elements by character length

Description: Please use Chrome browser to open

See the Pen PVYJGV by Lilyh (@lilyH) on Codepen.

As shown, the effect that we want to achieve is, (1) show two elements in a row, (2) The length of each element varies according to the text inside it

Let's look at the code first:

Html

<ulclass= "Flex-container">  <Liclass= "Flex-item"><Div>1234567</Div></Li>  <Liclass= "Flex-item"><Div>2</Div></Li>  <Liclass= "Flex-item"><Div>2</Div></Li>  <Liclass= "Flex-item"><Div>11111</Div></Li>  <Liclass= "Flex-item"><Div>11111111111111111111</Div></Li>  <Liclass= "Flex-item"><Div>22222222222222222222222222222222222222222222222</Div></Li></ul>

Css

. Flex-container{padding:0;margin:0;List-style:None;Display:Flex;-webkit-flex-flow:Row Wrap;justify-content:Space-between;}. Flex-item{Flex-grow:1;Min-width:40%;Height:150px;Margin-top:10px;Line-height:150px;Color: White;Font-weight:Bold;font-size:3em;text-align:Center;}. Flex-item Div{background:Tomato;Height:150px;Line-height:150px;}. Flex-item:nth-of-type (2n+1) Div{Margin-right:5px;}. Flex-item:nth-of-type (2n) div{Margin-left:5px;}

Description:

For specific instructions on flex properties, please refer to the Flex full disclosure

(1) container, Flex-container, set Display:flex; it means that the child element inside is the flex layout.

(2) container, Flex-container, set-webkit-flex-flow:row wrap; indicates that the child elements are arranged horizontally, with multiple lines

(3) container, Flex-container, set justify-content:space-between; child elements scattered on one line

(4) Sub-elements, Flex-item, set flex-grow:1; child element Full energy space (remove to see what effect)

(5) Sub-elements, Flex-item, set min-width:40%; This is the key (you can try the other values)

A. All know the setting 50%, then two elements are as large as the space, more than 50%, then there must be no more than two elements on a row

B. Because of the minimum width of the set, if the width is too small, such as 10%, and the content of the child element is too low, there will be more than 2 child elements on a line at this time.

C. Consider that if the three next to each child element has only one "word" content, the width should be set to at least 33.33%, so the width value should be between 33.33% and 50% (assuming that the child element has no margin and other properties that make it "bigger")

D. Suppose we set min-width:35%, (1) Then if two sub-elements a, b,a content of the same row is greater than or equal to 65% width, when the content of B exceeds 35% width, the latter element is squeezed to the next line, (2) if the contents of two child elements A and b,a on the same line are small, But since it is at least 35% wide, when the content of B is more than 65% wide, the subsequent child elements are squeezed to the next line.

According to the above principle, it is possible to set the value of Min-width by evaluating the length of the content of the elements in the project, so this can only be done in a simple way, in order to really achieve the size of the container by the length of the content text and full line, please use JS.

PS: Flex in the code is written in the standard, compatible with Android and iOS, please use this tool

Using Flexbox to arrange DOM elements by character length