Flex Layout (also known as Elastic Box Layout) is a CSS layout model for flexible, adaptive layout of elements within containers. By using flex layouts, we can easily create horizontally or vertically adaptive layouts, allowing elements to scale and distribute according to the available space.
To use flex layout, the following style properties need to be applied to the parent container (the flex container):
1. display: flex;: Set the container to the Flex layout mode.
2. flex-direction: row|row-reverse|column|column-reverse;: Define the direction of the main axis, the default is the horizontal direction, that is, row. Possible values are:
row: The main axis is horizontal, and the starting point is at the left end (default value).
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.
column-reverse: The main axis is vertical, and the starting point is at the bottom.
3. justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly;: Define the alignment of the item on the main axis, and the default is the starting point alignment. Possible values are:
flex-start: start alignment (default).
flex-end: End alignment.
center: Center alignment.
space-between: both ends are justified, and the space between items is equal.
space-around: Equal spacing on both sides of each item.
space-evenly: Each item is equally spaced.
4. align-items: flex-start|flex-end|center|baseline|stretch;: defines the alignment of the items on the cross axis, and the default is the starting point alignment. Possible values are:
flex-start: start alignment.
flex-end: End alignment.
center: Center alignment.
baseline: baseline alignment.
stretch: stretch to fill the entire container (default).
Other optional properties include flex-wrap, align-content, and order, etc., which are used to more finely control the arrangement and ordering of flex boxes.
For child elements (flex items) inside a flex container, the following style properties can be used:
1. flex-grow: number;: defines the growth ratio of the item when there is space left. The default is 0, i.e. no growth.
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap: means no line
wrap wrap: normal line wrap, the first one is on the first line The first
wrap-reverse: wrap up, the first line is below
2, flex-shrink : number;: Defines the reduction ratio of the item when the space is insufficient. The default is 1, that is, it can be zoomed out.
3. flex-basis: length|auto;: defines the initial size of the item on the main axis. The default is auto.
4. flex: flex-grow flex-shrink flex-basis;: abbreviate the above three attributes into one attribute. The default value is 0 1 auto.
By using the above properties flexibly, various layout effects can be achieved, such as evenly allocating space, dynamically adjusting the ratio of width to height, etc.
Here is an example of a basic flex layout:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 25%;
}
In the above example, the .container class defines a flex container, the main axis is horizontal (flex-direction: row), the alignment of items on the main axis is justified (justify-content: space-between), and on the cross axis Align top center (align-items: center). The .item class defines flex items whose flex-grow property is set to 1 to evenly distribute the remaining space.