This article is published by the Cloud + community
Flex, short for Flexible Box, is a CSS3 layout mode. With Flex layouts, you can elegantly solve many CSS layout problems. The six attributes of the container and the six attributes of the project are described below. Each attribute is accompanied by a rendering, and the implementation code is updated here as a Github path.
1. Browser support
You can click to view the compatibility of each browser
2. Container properties
Note that with Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.
The container has six attributes, which are:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
(1) the flex – direcion attributes:
Function: Control the direction of the spindle
flex-direction: row | row-reverse | column | column-reverse;
Default value: row
(2) the flex – wrap attributes:
What it does: By default, projects are arranged on a line (also known as an “axis”). The flex-wrap property defines how to wrap a line if an axis does not fit.
flex-wrap: nowrap | wrap | wrap-reverse;
Default value: nowrap
(3) the flex – flow properties
Purpose: This property is a short form of the flex-direction and flex-wrap properties
Default value: row nowrap
(4) the justify – content attribute
Purpose: Defines the alignment of items on the main axis
justify-content: flex-start | flex-end | center | space-between | space-around;
Default value: flex-start
(5) the align – the items property
Purpose: Defines how items are aligned on the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
Default value: flex-start
Note: If align-items are “stretch” and you want to see each Flex-item spread across the cross axis, you need to set the height of all flex-items to: height:auto, otherwise it will not work.
(6) the align – content attribute
Property defines the alignment of multiple axes. This property has no effect if the project has only one axis.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Default value: stretch
Flex-start: align with the starting point of the cross axis.
Flex-end: aligns with the end of the cross axis.
Center: aligns with the midpoint of the intersecting axis.
Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.
Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
Stretch: axis occupies the whole cross axis.
3. Project attributes
The project has six attributes, which are:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
(1) the order attribute:
Function: Defines the order of items, the smaller the number, the higher the order.
Default value: 0
(2) the flex – turns up properties
Role: Scale up the item if there is any remaining space. So each project allocates the remaining space according to this ratio.
Default: 0 (no zoom in)
(3) the flex – the shrink properties
Flex-shrink: Indicates the “shrink rate” of a project if there is insufficient space. 0 indicates that the system does not shrink when the space is insufficient.
Default value: 1
Negative values have no effect on this property
(4) the flex – the basis properties
Purpose: Defines the initial value of the amount of space an item takes up along the main axis.
Default: auto(original size of the project)
(5) the flex properties
Function: is a short form of the flex-grow, flex-shrink, and flex-basis properties.
flex: none | [<‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
Note: Several common abbreviations;
flex: auto; === flex: 1 1 auto;
flex: none; === flex: 0 0 auto;
flex: initial; === flex: 0 1 auto;
flex: ; === flex: 1 auto;
flex: 1; === flex: 1 1 auto;
It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values
(6) the align – self properties
Effect: Property allows a single item to have a different alignment than other items, overriding the align-items property.
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Default value: auto, inheriting the align-items property of the parent element. If there is no parent element, it is equivalent to stretch.
4. Summary
This article describes the six attributes of the container and the six attributes of the Flex-Item item, respectively. It is recommended to follow the demo as a whole to deepen your understanding. If you have any questions, please point out.
This article has been published by Tencent Cloud + community authorized by the author