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

In this article, the editor introduces in detail "how to apply CSS3's Flex elastic layout". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to apply CSS3's Flex elastic layout" can help you solve your doubts.

Flex (Flexible Box), which means "elastic layout". "elasticity", as the name implies, has the characteristics of a spring and can stretch freely (a bit adaptive).

In fact, Flex did not appear recently, but it was proposed as early as ten years ago. In 2009, W3C put forward a new scheme-Flex layout, which can realize all kinds of page layout simply, completely and responsively. At present, it is supported by all browsers, which means that this feature can be used safely now.

Any container can be specified as a Flex layout

Inline elements can also be laid out using Flex

Example:

Elements that use Flex layouts are called Flex containers (flex container), or "containers" for short. All its child elements automatically become container members, called Flex projects (flex item), or "projects" for short.

The container has two axes by default:

Horizontal spindle (main axis) and vertical cross axis (cross axis). The start position of the spindle (the intersection with the border) is called main start, and the end position is called main end;. The start position of the cross axis is called cross start, and the end position is called cross end. Projects are arranged along the principal axis by default. The spindle space occupied by a single project is called main size, and the cross-axis space occupied by a single project is called cross size.

Do you feel like you've learned it again? It would be nice to understand the concept. It doesn't have to be memorized. It won't be the same as reciting the text at school and taking an exam.

1. Flex-direction: determining the arrangement direction of items (item)

Flex-direction has four values:

1. Row (default): the principal axis is horizontal, and the starting point is at the left end.

2. Row-reverse: the principal axis is horizontal, and the starting point is at the right end.

3. Column: the principal axis is vertical, and the starting point is along the upper edge.

4. Column-reverse: the principal axis is vertical, and the starting point is along the lower edge.

In the example diagram above, we change the array slightly, and the principal axis is set to the vertical direction, and the layout of the following figure will appear.

Example:

You can also set the principal axis to be vertical and the starting point at the lower edge.

Example:

Do you think he (Flex) will be used in the layout in the future?

II. Flex-wrap

By default, item are arranged on a single line (also known as "axis"). The flex-wrap property defines how the item wraps if one axis does not fit.

Example:

Flex-wrap has three values:

1. Nowrap (default): no line wrapping

2. Wrap: line breaks, with the first line at the top.

3. Wrap-reverse: line breaks, with the first line below.

Example:

III. Flex-flow

The flex-flow property is an abbreviation for the flex-direction property and the flex-wrap property, and the default value is row nowrap.

Example:

4. Justify-content: defines the alignment of item on the spindle

Justify-content has five values:

1. Flex-start (default): align left

2. Flex-end: right alignment

3. Center: centered

4. Space-between: the two ends are aligned, and the spacing between items is equal.

5. Space-around: the intervals on both sides of each item are equal. Therefore, the interval between the item is twice as large as the interval between the item and the border.

Example:

5. How to align align-items:Item on the cross axis

1. Flex-start: alignment of the starting point of the cross axis.

2. Flex-end: the end point of the cross axis is aligned.

3. Center: the midpoint alignment of the cross axis.

Example:

4. Baseline: the baseline alignment of the first line of text in the project.

5. Stretch (default): if the project is not set to height or set to auto, it will occupy the height of the entire container.

6. Align-content: alignment of multiple axes

How do multiple axes appear? If the width exceeds, there will be multiple axes after the line is changed.

1. Flex-start: align with the starting point of the cross axis.

2. Flex-end: align with the end of the cross axis.

3. Center: align with the midpoint of the cross axis.

4. Space-between: align with the two ends of the cross axis, and the interval between the axes is evenly distributed.

5. Space-around: the intervals on both sides of each axis are equal. Therefore, the interval between the axis is twice as large as the interval between the axis and the frame.

6. Stretch (default): the axis occupies the entire cross axis.

Compare the difference between adding align-content and not having align-content: example:

1. Order

The order of the Item. The lower the number, the higher the arrangement, and the default is 0.

Example:

Give item, a sort value, and sort according to that value. The default is 0 if there is no set value.

II. Flex-grow

Defines the magnification of the Item, which defaults to 0, that is, it is not zoomed in if there is any remaining space. It means to divide 100% width / height by what proportion.

Example: if all projects have a flex-grow property of 1, they will divide the remaining space equally, if any. If the flex-grow property of one project is 2 and all other projects are 1, the former will occupy twice as much remaining space as the other items. (see the example above)

III. Flex-shrink

The reduction ratio of Item is defined, and the default is 1, that is, if there is not enough space, the project will be reduced.

Look at the figure above: the width of 3 item and: 100+200+200=500px, which exceeds the width of box (400px) (beyond the width of 100px). At this time, item1/item2 all sets flex-shrink to 0, while item3 sets flex-shrink to 1, so when the width is not enough, item3 will shrink, where the actual width of item3 is 100px.

Take a look at the following picture:

Item1/item3 sets flex-shrink to 1, while the flex-shrink of item2 is 0, that is, when the width exceeds, the width will be scaled down by item1 and item3, and the item2 will keep the original width.

IV. Flex-basis

The flex-basis attribute defines the principal axis space (main size) occupied by Item before allocating excess space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of Item.

Example:

This property can be replaced by directly setting the width and height, as shown in the annotation section of the figure above.

5. Flex

The flex attribute is an abbreviation for flex-grow, flex-shrink, and flex-basis, and the default value is 0 1 auto. The last two attributes are optional.

So the first few examples are written directly in flex, but flex is actually the abbreviation of flex-grow, flex-shrink and flex-basis.

VI. Align-self

The align-self attribute allows a single Item to be aligned differently from other Item, overriding the align-items attribute. The default value is auto, which inherits the align-items attribute of the parent element, which is equivalent to stretch if there is no parent element.

Example:

In this way, the align-items of the container will be overwritten.

After reading this, the article "how to apply CSS3's Flex flexible layout" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, 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.