Flex flexible layout

flex Elastic layout

Reprinted from ：Flex Layout of the tutorial ： Grammatical passage - Ruan Yifeng's Weblog (ruanyifeng.com)

Page layout （layout） yes CSS A key application of .

Traditional solutions for layout , be based on The box model , rely on display attribute + position attribute + float attribute . It is very inconvenient for those special layouts , such as , Vertical center It's not easy to do .

2009 year ,W3C Put forward a new scheme —-Flex Layout , It's easy 、 complete 、 Responsive implementation of various page layouts . at present , It's supported by all browsers , It means , Now you can use this function safely .

Flex Layout will be the first choice for future layout . In this paper, Flex The syntax of layout .

The following content mainly refers to the following two articles ：A Complete Guide to Flexbox and A Visual Guide to CSS3 Flexbox Properties.

One 、Flex What is the 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;
}

This attribute may take 6 It's worth , except auto, Everything else goes with align-items The attributes are exactly the same .