Simulate space-between,space-around_html/css_WEB-ITnose of flexbox justify-content

(The original intention of this article is to make up for the shortcomings of responsive design in the bottom version of the browser, so if you are not interested in responsiveness, please ignore it)

flexbox ?

About flexbox, I cannot say much professionally. You can refer to Flexible boxes for a more elegant web layout. This is a very powerful thing, and there is a justify-content attribute, which is used to specify the layout in the horizontal direction. One of the attributes, space-between, allows the child elements to be evenly distributed, with the first child element on the far left of the container and the last child element on the right. Another attribute, space-around, allows a column of child elements to be evenly distributed.

(Note that if the parent element has display:flex set, it only affects the first-level child elements under this parent element. In other words, if there is div->ul->li, div is set flex, the li element has no effect).

For example, the penultimate line in the picture below is space-between, and the last line is space-around.

text-align:justify

justify means aligning text on both ends,

If In addition to the "two-facedness" of inline-block, which is inline on the outside and block on the inside, justify-content:space-between can be realized. Because justify targets inline elements.

As for space-around, add horizontal padding to the parent element, and the padding value is equal to the margin value. For example, li margin:0 1%;, then the spacing between li tags is 2% width, the left spacing of the leftmost li and the right spacing of the rightmost li are both 1% width, then in the parent element padding:0 1% ; Let the spacing between the two tables of all li tags be 2% width.

The specific implementation has been implemented in Zhang Xinxu’s blog. See display:inline-block/text-align:justify for the aligned layout of both ends of the list

A few points to note:

1.text-align:justify has compatibility issues. For solutions, please refer to Zhengmei’s css text alignment.

2. The child elements will inherit text-align:justify, and the text will be aligned at both ends

For the solution, please see the two ends in Alimama’s cube css solution To align the layout, add class dib.

/* 子元素取消两端对齐 */.dib {    -moz-text-align-last: auto;    -webkit-text-align-last: auto;    text-align-last: auto;    text-justify: auto;    text-align: left;    letter-spacing: normal;    word-spacing: normal;}

3. The number of justify_fix class tags that make the last row left-aligned is the maximum inline-block that can be accommodated in one row minus 2, It does not have to be the "number of lists of elements in each row" mentioned in Zhang Xinxu's article.

Because the last row has at least 2 inline-blocks, it will be aligned at both ends, and the justify_fix class tag actually creates a and Inline-block with the same list width moves the list element of the last row to the left.

In actual use, first use the responsive design view, adjust the width to the maximum width that needs to be adapted, such as 1920px, see how many list elements can be placed in one line, and then subtract 2 That's it.

4. If the list elements are dynamically inserted, spaces must be added between the list elements, otherwise the layout will be invalid in modern browsers

ff

ie8

Solution

You can see that avalon dynamically inserts no spacing between list elements according to the template.

Finally, let’s check whether the flexbox simulated with text-align:justify has the same effect as flexbox

The justify-content of flexbox below is set to space-around.

Example download

If you think the content of this article is helpful to you, you can reward me: