Shulou(Shulou.com)06/03 Report--

Editor to share with you the example analysis of container properties in the css elastic box model, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

The traditional layout scheme, based on the boxed model, relies on display attributes + position attributes + float attributes. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.

First, the initial code and style are as follows, and then we add the code and modify the code to see the difference between the style.

As for the elastic box, the first condition is to talk about the container and the project. For us, the container is the ul in the code, and the project is li. All right, let's start adding code to see the magic style.

The first condition for an elastic box is to add display:flex to the container.

The following properties are container properties and are added to the ul.

First, flex-direction: determine the direction of the spindle.

1. Flex-direction:row; (principal axis direction: horizontal row / row arranged from left to right)

If you add this attribute to the container ul, you will find that the style is as follows, but it can be displayed horizontally.

Speaking of elasticity, let's test this effect and reduce the width of the outer container.

We first reduce to this, if the width continues to be small, we will find that it will be different, even if the width is reduced, he will not change the line, and after the width is reduced, his width will be maintained at the width of the content in it.

2. FlexMurdirectionPlus rowmurse; (the spindle is arranged from right to left)

3.flexMerry direction column; (the principal axes are arranged vertically from top to bottom)

4. FlexMutual direction is arranged vertically from the bottom up.

2. Flex-wrap: this attribute controls whether the flex is single-line or multi-line (note: I have adjusted the width here to 300px)

1. Flexflexwrapposition now rapper; (default, no line wrapping)

As we did at the beginning of the experiment, even if his width was set to that small, he would not change the line.

2. FlexFlewrapGrapwrapwrapwrapwrapWrapFor the following figure

3. Flexmusic wrapposition; (reverse, in popular terms, change the position of the first line and the last line, the second line and the penultimate line, and so on)

3. Compound abbreviated form of flex-flow; flex-direction and flex-wrap, default is row nowrap

1. Flex-flow:row-reverse wrap; (arrange from right to left, line wrap)

Just write a combination of attributes and try other styles for yourself.

4. Justify-content defines how items are arranged on the spindle.

Note: I added the flex-wrap:wrap; newline attribute to the following experiment (easy to identify)

1. JustifyMutual contentRose flexstart; (left-aligned)

2. JustifyMutual contentRose flexMurend; (right-aligned)

3.justifyMuthContentin Center; (Center alignment)

4. Justifytalk contentlyspace color between.Based on both ends, the items are equally spaced.

I've made the width a little smaller here, so when I see the picture below, does it feel like it's easy to use this property to implement the layout?

5. Verify-content:space-around; (each item is spaced at equal intervals on both sides)

Align-item specifies how the elastic box is aligned at the cross axis.

This time, the first and second heights are adjusted larger like this. The default value of the following figure stipulates that the line will not be changed.

1. AlignMusi temsmistress; (default)

2. AlignMutton itemsveflexMurend; (alignment of the end of the cross axis)

3. Align-items:center; (align with the midpoint of the cross axis)

4. Align-items:baseline; (baseline alignment of the first line of text of the project)

The text here is resized, and the first text is changed to 40px

5. Align-items:flex-start; (alignment of the start point of the cross axis)

6. Align-content:

Defines the alignment of multiple grid lines, and does not work if the project has only one grid line.

Here I adjusted the height of a container property to 300px; newline display

1. Align-content: stretch (default value, axis occupies the entire cross axis)

2. Align-content: flex-star (aligned with the start of the cross axis)

3. Align-content: flex-end (aligned with the end of the cross axis)

4. Align-content: center (aligned with the midpoint of the cross axis)

5. Align-content: space-between (aligned with both ends of the cross axis and evenly distributed between them)

6. Align-content: space-around (equally spaced on both sides of the cross axis)

The above is all the content of the article "sample Analysis of Container Properties in the css Elastic Box Model". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.