CSS Flex Layout study notes

summary

Flex yes Flexible Box Abbreviation , Meaning for Elastic box model .

Any container can use Flex Layout .

.box {
  display: flex;
}

Inline elements can also be used Flex Layout .

.box {
  display: inline-flex;
}

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

Basic concepts

use Flex The elements of the layout are called Flex Containers （Flex Container）, abbreviation Containers , All its child elements are 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 end position is called main end; The starting position of the cross axis is called cross start, The end 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.

Properties of the container

flex-direction attribute

flex-direction Property is used to specify the direction of the spindle （ That is, the arrangement direction of the project ）.

.box {
  /* row： The principal axis is horizontal , The starting point is on the left （ Default ） */
  /* row-reverse： The principal axis is horizontal , The starting point is on the right  */
  /* column： The principal axis is perpendicular , The starting point is the upper edge  */
  /* column-reverse： The principal axis is perpendicular , The starting point is the lower edge  */
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap attribute

By default , The items are arranged on an axis .flex-wrap Property is used to specify how to wrap lines when a grid line cannot accommodate all items .

.box {
  /* nowrap： Don't wrap （ Default ） */
  /* wrap： Line break , The first row is at the top  */
  /* wrap-reverse： Line break , The first row is at the bottom  */
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap: wrap-reverse

flex-flow attribute

flex-flow The attribute is flex-direction Properties and flex-wrap The combined shorthand form of properties , The default value is row nowrap.

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

justify-content attribute

justify-content Property is used to specify the alignment of items on the spindle .

.box {
  /* flex-start： Align left （ Default ） */
  /* flex-end： Right alignment  */
  /* center： In the middle  */
  /* space-between： The interval between the project and the project is equal , There is no gap between the item and the container border  */
  /* space-around： The spacing between each item is equal （ The gap between items is twice as large as the gap between items and container borders  */
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items attribute

align-items Property is used to specify the alignment of items on the cross axis .

.box {
  /* flex-start： Align top edge of cross axis  */
  /* flex-end： Align the lower edge of the cross axis  */
  /* center： Align the center of the cross axis  */
  /* stretch： The tensile , Fill the whole container （ Default ） */
  /* baseline： Baseline alignment of the first line of text in the project  */
  align-items: flex-start | flex-end | center | stretch | baseline;
}

align-content attribute

align-content Property is used to specify the alignment of multiple grid lines .（ If there is only one axis , The property does not work .）

.box {
  /* flex-start： Align top edge of cross axis  */
  /* flex-end： Align the lower edge of the cross axis  */
  /* center： Align the center of the cross axis  */
  /* stretch： The tensile , Full cross axis （ Default ） */
  /* space-between： The axis is equally spaced from the axis , There is no space between the axis and the upper and lower edges of the cross axis  */
  /* space-around： The spacing on both sides of each axis is equal （ The spacing between the axes is twice as large as that between the axis and the upper and lower edges of the cross axis  */
  align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}

Project properties

order attribute

order Property is used to specify the sort order of items . The smaller the number, the higher the order , The default is 0.

.item {
  order: <integer>;
}

flex-grow attribute

flex-grow Property is used to specify the magnification of the project when there is space left . The default is 0, Don't zoom in even if there is room left . If all items are flex-grow Attribute values are equal , Then divide the remaining space equally ; If not equal , Then divide the remaining space proportionally .

.item {
  flex-grow: <number>;
}

flex-shrink attribute

flex-shrink Property is used to specify the reduction of the item when there is insufficient space . The default is 1, That is, reduce when there is insufficient space . if flex-shrink Property set to 0, No reduction . If all items are flex-shrink Properties are not equal , Then scale it down .

.item {
  flex-shrink: <number>;
}

flex-basis attribute

flex-basis Property is used to specify the spindle space occupied by the project before allocating the remaining space （main size）. The browser calculates the remaining space of the spindle according to this attribute . The default is auto, That is, the original size of the project .

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

flex attribute

flex The attribute is flex-grow attribute 、flex-shrink Properties and flex-basis The combined shorthand form of properties （ The last two properties are optional ）, The default is flex: 0 1 auto;. It is recommended that this combined abbreviation be used preferentially .

.item {
  flex: auto | none | <flex-grow> <flex-shrink> <flex-basis>;
}

The two quick values of this property ：auto（1 1 auto） and none（0 0 auto）.

align-self attribute

align-self Property is used to specify that a single item uses the same parent element align-items Attribute different cross axis alignment , covering align-items attribute , The default is auto, Represents the... That inherits the parent element align-items attribute , If there is no parent element, it is equivalent to stretch.

.item {
  /*  except  auto  External and  align-items  The optional values of the properties are the same  */
  align-self: auto | flex-start | flex-end | center | stretch | baseline;
}