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

This article mainly introduces the relevant knowledge of "how to use the flex layout of CSS3". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "how to use the flex layout of CSS3" can help you solve the problem.

In 2009, W3C put forward a new scheme-Flex layout, which can realize all kinds of page layout in a simple, complete and responsive manner. At present, it has been supported by all browsers.

Flex is the abbreviation of FlexibleBox, which means "flexible layout" and is used to provide maximum flexibility to the box model. Any container can be specified as a Flex layout.

Inline elements can also be laid out using Flex.

.box {

Display:flex

}

.box {

Display:inline-flex

}

It should be noted that browsers with the Webkit kernel must be prefixed with-webkit.

.box {

Display:-webkit-flex;/*Safari*/

Display:flex

}

In addition, when set to the Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.

6 attributes frequently used in flex layout

Flex-direction

Flex-wrap

Flex-flow

Justify-content

Align-items

Align-content

1. The flex-direction attribute determines the direction of the principal axis (that is, the direction of the arrangement of items).

.box {

Flex-direction:row | row-reverse | column | column-reverse

}

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

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

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

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

2. The flex-wrap attribute defines how to wrap if an axis cannot fit.

.box {

Flex-wrap:nowrap | wrap | wrap-reverse

}

Nowrap (default): no line wrapping.

Wrap: line break, the first line is at the top.

Wrap-reverse: wrap, the first line is at the bottom.

3. The flex-flow attribute is the abbreviation of the flex-direction attribute and the flex-wrap attribute, and the default value is rownowrap.

.box {

Flex-flow: |

}

4. The justify-content attribute defines the alignment of the project on the spindle.

-content:flex-start | flex-end | center | space-between | space-

Flex-start (default): align left

Flex-end: align to right

Center: Center

Space-between: both ends are aligned and the spacing between items is equal.

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

5. The align-items attribute defines how items are aligned on the cross axis.

.box {

Align-items:flex-start | flex-end | center | baseline | stretch

}

Flex-start: the start point of the cross axis is aligned.

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

Center: the midpoint alignment of the cross axis.

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

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

6. The align-content attribute defines the alignment of multiple axes. If the project has only one axis, this property does not work.

.box {

Align-content:flex-start | flex-end | center | space-between | space-around | stretch

}

This property may take six values.

Flex-start: aligns with the start point of the cross axis.

Flex-end: aligns with the end of the cross axis.

Center: aligns with the midpoint of the cross axis.

Space-between: aligned with both ends of the cross axis, the spacing between the axes is evenly distributed.

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.

Stretch (default): the grid line occupies the entire cross axis.

There are also six properties set on the project.

Order

Flex-grow

Flex-shrink

Flex-basis

Flex

Align-self

The order property defines the order in which items are arranged. The lower the number, the higher the arrangement, and the default is 0.

.item {

Order:

}

The flex-grow property defines the magnification of the project, which defaults to 0, that is, it is not zoomed in if there is any remaining space.

.item {

Flex-grow:;/*default0*/}

If all items 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.

The flex-shrink property defines the reduction of the project, which defaults to 1, that is, if there is not enough space, the project will shrink.

.item {

Flex-shrink:;/*default1*/}

If the flex-shrink property of all projects is 1, it will be scaled down proportionally when there is insufficient space. If the flex-shrink property of one project is 0 and all other projects are 1, the former will not shrink when there is insufficient space.

The flex-basis attribute defines the principal axis space (mainsize) occupied by the project 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 the project.

.item {

Flex-basis: | auto;/*defaultauto*/}

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

.item {

Flex:none | [? | |]

}

This property has two shortcut values: auto (11auto) and none (00auto).

The align-self property allows a single project to be aligned differently from other items, overriding the align-items property. 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.

.item {

Align-self:auto | flex-start | flex-end | center | baseline | stretch

}

This is the end of the content about "how to use the flex layout of CSS3". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.