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

Web page layout (layout) is a key application of CSS.

The traditional solution to layout, based on the box 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.

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 is supported by all browsers, which means that this feature can be used safely now.

Flex layout will be the first choice for future layout. This article introduces its syntax.

The following content mainly refers to Ruan Yifeng's network log.

What is the layout of Flex?

Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility to the box model.

Any container can be specified as a Flex layout.

.box {display: flex;}

Inline elements can also be laid out using Flex.

.box {display: inline-flex;}

Browsers with Webkit kernel must be prefixed with-webkit.

.box {display:-webkit-flex; / * Safari * / display: flex;}

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

II. Basic concepts

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.

By default, the container has two axes: a horizontal principal axis (main axis) and a 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.

III. Attributes of the container

The following six properties are set on the container.

Flex-direction

Flex-wrap

Flex-flow

Justify-content

Align-items

Align-content

3.1 flex-direction attribut

The flex-direction property determines the direction of the principal axis (that is, the direction in which the items are arranged).

.box {flex-direction: row | row-reverse | column | column-reverse;}

It may have four values.

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.

3.2 flex-wrap attribut

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

.box {flex-wrap: nowrap | wrap | wrap-reverse;}

It may take three values.

(1) nowrap (default): no line wrapping.

(2) wrap: line breaks, with the first line at the top.

(3) wrap-reverse: line wrapping, with the first line below.

3.3 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.

.box {flex-flow: | |;} 3.4 justify-content attribute

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

.box {justify-content: flex-start | flex-end | center | space-between | space-around;}

It may take five values, and the specific alignment is related to the direction of the axis. The following assumes that the principal axis is from left to right.

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.

3.5 align-items attribut

The align-items property defines how the project is aligned on the cross axis.

.box {align-items: flex-start | flex-end | center | baseline | stretch;}

It may take five values. The specific alignment is related to the direction of the cross axis, which is assumed to be from top to bottom.

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.

3.6 align-content Properties

The align-content property 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.

IV. Properties of the project

The following six properties are set on the project.

Order

Flex-grow

Flex-shrink

Flex-basis

Flex

Align-self

4.1 order Properties

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:;}

4.2 flex-grow Properties

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:; / * default 0 * /}

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.

4.3 flex-shrink attribut

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:; / * default 1 * /}

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.

A negative value is not valid for this property.

4.4 flex-basis Properties

The flex-basis attribute defines the principal axis space (main size) 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; / * default auto * /}

It can be set to the same value as the width or height property (such as 350px), and the project will occupy a fixed space.

4.5 flex attribut

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.

.item {flex: none | [? | |]}

This property has two shortcut values: auto (1 1 auto) and none (0 auto).

It is recommended that you give priority to using this property rather than writing three separate properties separately, because the browser calculates the relevant values.

4.6 align-self Properties

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 attribute may take six values, all of which are exactly the same as the align-items property except auto.

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.