当前位置：网站首页>Flex layout

Flex yes Flexible Box Abbreviation , Meaning for " Elastic layout ", To provide maximum flexibility for box models . Any container can be specified as Flex Layout .

.box{display: flex;}

Inline elements can also be used Flex Layout .

.box{ display: inline-flex;}

Webkit Browser for kernel , Have to add -webkit Prefix .

.box{

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

display: flex;}

Be careful , Set to Flex After the layout , The child element float、clear and vertical-align Property will fail .

Two 、 Basic concepts

use Flex Elements of layout , be called Flex Containers （flex container）, abbreviation " Containers ". All its child elements automatically become container members , be called Flex project （flex item）, abbreviation " project ".

The container has two axes by default ： Horizontal spindle （main axis） And the vertical cross axis （cross axis）. Starting position of spindle （ The intersection with the border ） be called main start, The ending position is called main end; The starting position of the cross axis is called cross start, The ending position is called cross end.

Items are arranged along the main axis by default . The spindle space occupied by a single project is called main size, The cross axis space occupied is called cross size.

3、 ... and 、 Properties of the container

following 6 Properties are set on the container .

flex-direction\flex-wrap\flex-flow\justify-content\align-items\align-content

3.1 flex-direction attribute

flex-direction Property determines the direction of the spindle （ That is, the arrangement direction of the project ）.

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

It may have 4 It's worth .

row（ The default value is ）： The principal axis is horizontal , The starting point is on the left .

row-reverse： The principal axis is horizontal , The starting point is on the right .

column： The principal axis is perpendicular , The starting point is at the top .

column-reverse： The principal axis is perpendicular , Starting edge .

3.2 flex-wrap attribute

By default , The projects are all in one line （ also called " axis "） On .flex-wrap Attribute definitions , If an axis doesn't line up , How to wrap .

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

It may take three values .

（1）nowrap（ Default ）： Don't wrap .

（2）wrap： Line break , The first row is at the top .

（3）wrap-reverse： Line break , The first row is at the bottom .

3.3 flex-flow

flex-flow The attribute is flex-direction Properties and flex-wrap Attribute shorthand , The default value is row nowrap.

.box { flex-flow: <flex-direction> || <flex-wrap>;}

3.4 justify-content attribute

justify-content Property defines the alignment of the item on the spindle .

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

It may take 5 It's worth , The alignment depends on the direction of the axis . Let's assume that the main axis is from left to right .

flex-start（ The default value is ）： Align left

flex-end： Right alignment

center： In the middle

space-between： full-justified , The intervals between the items are all equal .

space-around： The spacing between each item is equal . therefore , The spacing between items is twice as large as the spacing between items and the border .

3.5 align-items attribute

.align-items Property defines how items are aligned on the cross axis .

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

It may take 5 It's worth . The specific alignment is related to the direction of the cross axis , Let's assume that the cross axis is from top to bottom .

flex-start： Align the starting points of the intersecting axes .

flex-end： The ends of the intersecting axes are aligned .

center： Align the midpoint of the intersecting axis .

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

stretch（ The default value is ）： If the project is not set to height or set to auto, Will fill the entire container .

3.6 align-content attribute

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 attribute may take 6 It's worth .

flex-start： Align with the starting point of the intersecting axis .

flex-end： Align with the end of the cross axis .

center： Align with the midpoint of the intersecting axis .

space-between： Align with both ends of the cross axis , The average distribution of spacing between axes .

space-around： The spacing between each axis is equal . therefore , The spacing between the axes is twice as large as the spacing between the axes and the borders .

stretch（ The default value is ）： The axis occupies the entire cross axis .

Four 、 Project properties

following 6 Properties are set on the project .

order\flex-grow\flex-shrink\flex-basis\flex\align-self

4.1 order attribute

order Property defines the order in which items are arranged . The smaller the numerical , The further up the line , The default is 0.

.item {order: <integer>;}

4.2 flex-grow attribute

flex-grow Attribute defines the magnification of the item , The default is 0, That is, if there is any remaining space , And don't zoom in .

.item {flex-grow: <number>; /* default 0 */}

If all of the items flex-grow Attributes are 1, Then they will divide the remaining space equally （ If any ）. If a project flex-grow The attribute is 2, Everything else 1, Then the former will occupy twice as much space as the others .

4.3 flex-shrink attribute

flex-shrink Attribute defines the reduction ratio of the project , The default is 1, That is, if there is not enough space , The project will shrink .

.item {flex-shrink: <number>; /* default 1 */}

If all of the items flex-shrink Attributes are 1, When space runs out , I'm going to scale it down . If a project flex-shrink The attribute is 0, Everything else 1, When there is not enough space , The former does not shrink .

Negative values are not valid for this property .

4.4 flex-basis attribute

flex-basis Property defines before allocating extra space , Spindle space occupied by the project （main size）. Browser according to this property , Calculate if the spindle has extra space . Its default value is auto, The original size of the project .

.item {flex-basis: <length> | auto; /* default auto */}

It can be set to follow width or height Property is the same value （ such as 350px）, Then the project will occupy a fixed space .

4.5 flex attribute

flex The attribute is flex-grow, flex-shrink and flex-basis Abbreviation , The default value is 0 1 auto. The last two properties are optional .

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

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

It is recommended to use this property first , Instead of writing three separate attributes , Because the browser will calculate the relevant value .

4.6 align-self attribute

align-self Property allows a single item to have a different alignment than other items , covering align-items attribute . The default value is auto, Represents the... That inherits the parent element align-items attribute , If there is no parent element , Is equivalent to stretch.

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}