foreword
Flex layout is a newly added elastic layout model in CSS3, which can be used to implement common page layouts, such as: vertical centering, horizontal centering, equal height column layout, fixed bottom, left and right layout, up and down layout, adaptive width, Responsive layout and more. Using Flex layout can replace traditional layout methods such as float, position, and display, allowing us to complete page construction more easily and quickly. This article will give a comprehensive and detailed explanation of Flex layout, including its basic knowledge, usage methods, layout properties and usage scenarios, etc.
1. Basic knowledge
- Flexbox definition
Flexbox (elastic box) layout is a new layout model in CSS3. It is a one-dimensional layout model that can be used to arrange complex page elements to achieve adaptive layouts on different screen sizes and devices, such as vertical centering And the level is medium.
- Flex Containers and Flex Items
In the flex layout model, there are two basic concepts: flex container and flex item.
Flex container: Refers to the parent element that adopts the Flex layout model, declared through the display:flex or display:inline-flex attribute.
Flex item: refers to each sub-element contained in the flex container, which becomes a flex item.
- Main axis and cross axis
In the flex container, there are two concepts of main axis and cross axis.
Main axis: The main direction of the flex container, usually horizontal (row) or vertical (column).
Cross axis: The direction that crosses the main axis, usually vertical (column) or horizontal (row).
- Arrangement direction
There are two directions for the arrangement of elements in a flex container: from left to right (row) and from top to bottom (column).
2. How to use
- Define the flex container
First, we need to set the display property of the flex container to flex or inline-flex to declare that it adopts the flex layout model. It should be noted here that the display property must be defined on the Flex container, not on the child element.
.container {
display: flex; /*或者 inline-flex*/
}
- Set child element flex items
Setting flex items usually uses the flex property, which can be subdivided into three sub-properties: flex-grow, flex-shrink, and flex-basis.
flex-grow: Define the magnification ratio of the item, the default is 0, that is, if there is remaining space, it will not be magnified. If all items are set to 1, the remaining space is equally divided. If the flex-grow property of a certain item is 2, and the other items are 1, the remaining space occupied by the container of the former will be twice as much as that of other items.
flex-shrink: defines the reduction ratio of the item, the default is 1, that is, if there is insufficient space, the item will shrink. If all items are set to 0, there is not enough space and no shrinkage.
flex-basis: Defines the main axis space (main size) occupied by the item before allocating excess space. The default value is auto, which is the original size of the item.
.item {
flex: 1; /*设置为1则等分剩余空间*/
}
- Set the alignment direction and wrapping method of the flex container
To set the arrangement direction and wrapping mode of the flex container, you can use the flex-direction property and the flex-wrap property.
flex-direction attribute optional attribute value:
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 the upper edge.
column-reverse: The main axis is vertical, and the starting point is at the bottom.
flex-wrap attribute optional attribute value:
nowrap (default): Do not wrap.
wrap: Line break, the first line is above.
wrap-reverse: Newline, the first line is below.
.container {
flex-direction: row; /*设置为水平方向*/
flex-wrap: wrap; /*超出部分自动换行*/
}
- Sets the alignment of the flex item
We can use the align-items property and the justify-content property to set the alignment of flex items on the cross axis and the main axis, respectively.
The align-items attribute optional attribute value:
flex-start: The starting point of the cross axis is aligned.
flex-end: The end of the cross axis is aligned.
center: The midpoint of the cross axis is aligned.
baseline: The baseline alignment of the first line of text in the item.
stretch (default): If the item does not have a height set or is set to auto, it will take up the height of the entire container.
justify-content attribute optional attribute value:
flex-start (default): left-aligned.
flex-end: Right alignment.
center: centered.
space-between: Both ends are aligned, and the intervals between items are equal.
space-around: Equal spacing on both sides of each item. So, the spacing between items is twice as large as the spacing between items and the border.
space-evenly: Distributed inside the parent container with equal intervals.
.container {
align-items: center; /*交叉轴居中*/
justify-content: space-between; /*主轴两端对齐*/
}
3. Layout properties
-
Properties of flex containers
The flex container has some commonly used properties, which can help us control the layout effect under the flex layout model.
flex-direction: Set the direction of the main axis.
flex-wrap: Set whether the child element wraps.
justify-content: Sets how flex items are arranged on the main axis.
align-items: Sets how flex items are aligned on the cross axis.
align-content: Sets how to arrange multi-line flex items on the cross axis.
-
Properties of Flex Items
Flex items have some commonly used properties, which can help us more flexibly control the layout effect of elements.
order: defines the order in which the elements are arranged.
flex-grow: Defines the magnification of the element.
flex-shrink: defines the reduction ratio of the element.
flex-basis: defines the base size of the element.
flex: Set the three attributes of zooming in, zooming out, and base size of the element.
align-self: Set the alignment of the element on the cross axis, which will override the align-items property of the flex container.
4. Usage scenarios
- Equal height column layout
Usually, we want the content of multiple columns to be equal in height to achieve an equal-height column layout effect. The traditional implementation method is to calculate the height of each column through JavaScript and then adjust it, but using the Flex layout can achieve this effect very conveniently. We just need to set the parent container as a flex container and set the flex-grow property of all child elements to 1.
.container {
display: flex;
}
.item {
flex: 1;
}
- fixed bottom
Sometimes we need to fix some bottom content at the bottom of the page, such as footer, back button, etc.
It is very convenient to use the flex layout to achieve the effect of fixing the bottom. You only need to set the parent container as a flex container, set the height of the flex container to 100%, set the child element to absolute positioning (position:absolute), and then set the bottom to 0 That's it.
.container {
display: flex;
min-height: 100vh; /* 保证占满全屏 */
flex-direction: column; /* 竖直方向 */
}
.content {
flex: 1; /* 占满剩余空间 */
position: relative; /* 相对定位 */
}
.footer {
position: absolute; /* 绝对定位 */
bottom: 0; /* 底部对齐 */
}
- Center Horizontally and Vertically
It is very convenient to use the flex layout to achieve the effect of horizontal centering and vertical centering.
Center horizontally: set the justify-content property of the Flex container to center.
.container {
display: flex;
justify-content: center; /* 水平居中 */
}
Vertical centering: set the align-items property of the flex container to center.
.container {
display: flex;
align-items: center; /* 垂直居中 */
}
If you need to achieve horizontal centering and vertical centering at the same time, you can set the justify-content property and align-items property of the Flex container to center.
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
- left and right layout
The left-right layout is a common page layout method, which is usually used to realize the two-column layout of the page or the layout of the navigation bar and the content area. Using the flex layout can easily achieve the left and right layout effect, just set the parent container as a flex container, and then set the flex property of the content area to 1, so that it can occupy the remaining space, and the left area can be set to a fixed width.
Sample HTML code:
<div class="container">
<div class="sidebar">这是左侧区域</div>
<div class="content">这是内容区域</div>
</div>
CSS code example:
.container {
display: flex;
}
.sidebar {
width: 200px; /* 左侧区域固定宽度 */
}
.content {
flex: 1; /* 占满剩余空间 */
}
- Top and bottom layout
Bottom layout is also a common page layout method, which is usually used to implement the layout of the top navigation bar and content area of the page. Using the flex layout can easily achieve the top and bottom layout effects, just set the parent container as a flex container, and then set the flex property of the content area to 1, so that it can occupy the remaining space, and set a fixed height for the top navigation bar.
Sample HTML code:
<div class="container">
<div class="header">这是顶部导航栏</div>
<div class="content">这是内容区域</div>
</div>
CSS code example:
.container {
display: flex;
flex-direction: column; /* 垂直方向 */
}
.header {
height: 60px; /* 顶部导航栏固定高度 */
}
.content {
flex: 1; /* 占满剩余空间 */
}
- Adaptive width
Flex layout can be used to achieve width adaptation, so that the width of the element is automatically adjusted according to the width of the parent element. You only need to set the parent container as a flex container, and set the flex property of the child element to 1 or 0.
Sample HTML code:
<div class="container">
<div class="item">这是一个自适应宽度的元素</div>
<div class="item-fixed">这是一个固定宽度的元素</div>
</div>
CSS code example:
.container {
display: flex;
}
.item {
flex: 1; /* 自适应宽度 */
}
.item-fixed {
width: 200px; /* 固定宽度 */
}
- responsive layout
Responsive layout means that the page automatically adapts to different layouts according to the screen size and resolution of different devices. Responsive layout can be easily realized by using Flex layout. You only need to set different Flex attribute values and adjust the attribute values through media queries to achieve layout effects under different screen sizes.
Sample HTML code:
<div class="container">
<div class="item">这是一个元素</div>
<div class="item">这是另一个元素</div>
<div class="item">这是第三个元素</div>
</div>
CSS code example:
.container {
display: flex;
flex-wrap: wrap; /* 换行 */
}
.item {
flex: 1; /* 等分剩余空间 */
}
@media (max-width: 768px) {
.item {
flex-basis: 50%; /* 屏幕小于768px时，每行只显示两个元素 */
}
}
@media (max-width: 480px) {
.item {
flex-basis: 100%; /* 屏幕小于480px时，每行只显示一个元素 */
}
}