Summary of Flex Layout
Summary of Flex Layout
1. Setting up flex layout
- Block-level elements:
display: flex;- Inline elements:
display: inline-flex;- Webkit-based browsers:
display: -webkit-flex; /* Safari */
display: flex;2. Container Properties
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2.1 flex-direction Property
The flex-direction property determines the direction of the main axis (i.e., the direction in which items are laid out). It can have 4 values:
row (default): The main axis is horizontal, and the starting point is at the left end.
row-reverse: The main axis is horizontal, and the starting point is at the right end.
column: The main axis is vertical, and the starting point is at the top edge.
column-reverse: The main axis is vertical, and the starting point is at the bottom edge.
flex-direction
2.2 flex-wrap Property
The flex-wrap property defines whether items should wrap onto multiple lines if they do not fit on one line.
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}2.3 flex-flow
The flex-flow property is a shorthand for flex-direction and flex-wrap.
2.4 justify-content Property
The justify-content property defines the alignment of items along the main axis (horizontal direction).
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}2.5 align-items Property
The align-items property defines how items are aligned along the cross axis (vertical direction).
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}2.6 align-content Property
The align-content property defines the alignment of multiple lines (cross axes). This property has no effect if there is only one line of flex items.
.box {
align-content: flex-start | flex-end | center | space-between | space-around |
stretch;
}
3. Item Properties
3.1 order Property
The order property defines the sorting order of the items. The smaller the number, the higher the priority. The default is 0.
.item {
order: <integer>;
}3.2 flex-grow Property
The flex-grow property defines the ability for an item to grow if necessary. The default is 0, which means it will not grow even if there is available space.
.item {
flex-grow: <number>; /* default 0 */
}3.3 flex-shrink Property
The flex-shrink property defines the ability for an item to shrink if necessary. The default is 1, meaning the item will shrink if there is insufficient space.
.item {
flex-shrink: <number>; /* default 1 */
}If all items have a flex-shrink of 1, they will shrink equally when space is insufficient. If one item has a flex-shrink of 0 and the rest are 1, the former will not shrink when space is insufficient.
3.4 flex-basis Property
The flex-basis property defines the default size of an element along the main axis before the remaining space is distributed. The browser uses this property to calculate whether there is extra space on the main axis. Its default value is auto, which is the original size of the project.
.item {
flex-basis: <length> | auto; /* default auto */
}It can be set to the same value as the width or height property (e.g., 350px), then the item will occupy a fixed amount of space.
3.5 flex Property
The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.
3.6 align-self Property
The align-self property allows a single item to have a different alignment from the other items, overriding the align-items property. The default value is auto, which means it inherits the parent element's align-items property. If there is no parent element, it defaults to stretch.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Reference
AI Translation | AI 翻译
This article was translated from Chinese to English by AI. If there are any inaccuracies, please refer to the original Chinese version.
本文由 AI 辅助从中文翻译为英文。如遇不准确之处，请以中文原版为准。