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