1. Understanding flex
2. Understand Flex layout (also known as Flexbox layout)
Flex layout (also known as Flexbox layout) is a web-based CSS3 layout mode, whose purpose is to arrange various web page elements more flexibly and adaptively. Flex layout divides a parent container into one or more flexible items, so that these items can be arranged with each other according to certain rules, and automatically adapt to the container environment in which they are located.
In a flex layout, the parent container becomes the "flex container" and the child element becomes the "flex item". Flex containers have two important properties: flex-direction and justify-content. flex-direction is mainly used to determine the arrangement direction of flex items on the main axis, while justify-content is used to align flex items in the main axis direction.
In addition to these basic properties, Flex layout also has many other properties, such as: align-items, align-content, flex-wrap, order, flex-grow, flex-shrink, etc. These properties are used to define how flex items are ordered on the cross and main axis and how much space they occupy in the parent container.
Flex layout is a relatively advanced web page layout technology, which can help developers easily achieve complex web page layout effects, and has the characteristics of flexibility and responsiveness.
3. After the flex layout is set, the following properties will be invalid
| serial number | Attributes | Remark |
| 1 | float | |
| 2 | clear | |
| 3 | vertical-align | Can only be used in flex containers to align inline elements or text in flex items |
| 4 | display:inline-block | |
| 5 | width | Can be set on flex items |
| 6 | height | Can be set on flex items |
| 7 | margin: car | The flex item cannot be centered horizontally on the flex container, and justify-content:center needs to be used to achieve |
| 8 | flex-direction: row | This property is set to the default value flex-direction: row, if you need to change the main axis direction, you should use the flex-direction property |
| 9 | flex-wrap: nowrap | This property is set to the default value flex-wrap:nowrap. If you need to achieve line breaks or no line breaks, you should use the flex-wrap property |
| 10 | justify-content: flex-start | This property is set to the default value, if you need to change the alignment in the main axis direction, you should use the justify-content property |
| Note: This is not absolute and depends on the specific property values and the structure of the Flex item. There are cases where the above properties still work fine | ||
4. Flex layout has the following core concepts
4.1, Flex Container (Flex Container): The element to which the Flex layout is applied is called a Flex container. Its function is to define the container where the Flex item is located, so that the Flex item can be flexibly laid out.
4.2. Flex Item (Flex Item): The sub-elements in the Flex container are called Flex Items (Flex Item), and each Flex item has the properties of the flex box. At the same time, they are also limited by the flex container, such as the direction of placement, the order of arrangement, and so on.
4.3. Flex axis (Main Axis): The main placement direction of the flex container is the flex axis. On this axis, the flex items in the flex container are arranged sequentially.
4.4. Flex cross axis (Cross Axis): The axis perpendicular to the Flex axis is called the Flex cross axis. On this axis, the space occupied by flex items is limited, and the specific size is determined by the properties of the flex container.
4.5. Main axis direction attribute (justify-content): This attribute is used to control the alignment of the flex items on the flex axis. It can make flex items look better in the main axis direction, and is usually used to achieve horizontal alignment or vertical alignment.
4.6. Cross axis direction attribute (align-items): This attribute is used to control the alignment of Flex items on the cross axis. It can make flex items look better in the direction of the cross axis, and is usually used to achieve horizontal alignment or vertical alignment.
4.7. Elastic element attribute (flex): This attribute is used to control how the Flex item allocates the available space in the Flex container. The value of this property determines the scalability of the Flex item, which can change the size of the Flex item in the Flex container to adapt to different screen sizes or container sizes.
5. Flex container
A flex container is a parent element that contains a flex item. A flex container can be created by setting the display property of the element to flex or inline-flex.
| serial number | Attributes | attribute description | value | value description |
| 1 | display | Specify the container as a flex layout | flex | Spindle horizontal arrangement |
| inline-flex | Spindle vertical arrangement | |||
| 2 | flex-direction | Specifies the direction of the main axis | row | from left to right |
| row-reverse | Horizontal direction (right to left) | |||
| column | vertical direction (top to bottom) | |||
| column-reverse | Vertical direction (bottom to top) | |||
| 3 | justify-content | Specifies the alignment on the main axis | flex-start | Align near start |
| flex-end | Align near end | |||
| center | center alignment | |||
| space-between | Justify | |||
| space-around | spaced alignment | |||
| 4 | align-items | Specifies the alignment on the cross axis | flex-start | Align near start |
| flex-end | Align near end | |||
| center | center alignment | |||
| baseline | baseline alignment | |||
| stretch | stretch alignment | |||
| 5 | align-content | Specifies the alignment of multiple axes (only valid when the cross axis is multiple axes) | flex-start | Multi-line items are aligned to the start of the cross axis |
| flex-end | Multi-line items are aligned to the end of the cross axis | |||
| center | Multi-line items are center-aligned on the cross axis | |||
| space-between | Multi-line items are evenly distributed on the cross axis, the first and last items are aligned at both ends of the container, and the distance between items is equal. | |||
| space-around | Multi-line items are evenly distributed on the cross axis, with equal distances between items, and the distance between the first and last items from both ends of the container is half the distance between other items | |||
| stretch | Multi-line items stretch on the cross axis to fill the height of the container. | |||
| 6 | flex-wrap | Specifies whether the element wraps | nowrap | no line break |
| wrap | new line | |||
| wrap-reverse | reverse newline | |||
| 7 | flex-flow | It is used to set the direction and arrangement of the main axis and cross axis of the flex container at the same time. It is the abbreviation of the two properties of flex-direction and flex-wrap | row | 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 above | |||
| column-reverse | The main axis is vertical and the starting point is below | |||
| wrap | 换行，第一行在上方 | |||
| wrap-reverse | 换行，第一行在下方 | |||
| nowrap | 不换行，所有元素排在一行上 | |||
| inherit | 从父元素继承值 | |||
| 8 | align-self | 设置单个项目在交叉轴上的对齐方式 | auto | 默认值，元素继承父元素在交叉轴方向上的对齐方式 |
| flex-start | 元素在交叉轴的起点对齐 | |||
| flex-end | 元素在交叉轴的终点对齐 | |||
| center | 元素在交叉轴的中心对齐 | |||
| baseline | 元素在交叉轴上以基线对齐 | |||
| stretch | 将元素在交叉轴上拉伸至撑满整个交叉轴 |
六、Flex项目
Flex项目是Flex容器中的子元素，通过设置该元素的flex属性，即可使其成为一个Flex项目。
| 序号 | 属性 | 属性描述 |
| 1 | justify-content | 控制项目在主轴上的对齐方式 |
| 2 | align-items | 控制项目在交叉轴上的对齐方式 |
| 3 | flex-direction | 控制主轴的方向 |
| 4 | flex-wrap | 控制项目在一行内排列不下时的换行方式 |
| 5 | align-content | 控制多行项目在交叉轴上的对齐方式 |
| 6 | flex-grow | 表示Flex项目在空间分配时的放大比例。 flex-grow的默认值为0，数值越大，空间分配越多。 |
| 7 | flex-shrink | 表示Flex项目在空间不足时的缩小比例。 flex-shrink的默认值为1，数值越大，缩小比例越多，设置为 0 不缩放 。 |
| 8 | flex-basis | 表示Flex项目在空间分配前的初始大小。 flex-basis的默认值为auto，可以设置具体数值或百分比。 |
| 9 | order | 表示Flex项目在容器中的排列顺序。 order的默认值为0，数值越小，排列越靠前。可以使用负数值。 |
| 10 | flex | 是flex-grow, flex-shrink 和flex-basis的缩写，可以一次性设置以上三个属性 是flex-gflex的默认值为0 1 auto。 |
七、DEMO / vue3.3 + ts
7.1、水平、垂直 居中
<template>
<div class="container">
<!-- 水平、垂直 居中 -->
<div class="flex">
<div class="flex_item"></div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.container{
.flex{
display: flex;
justify-content: center; // 水平居中
align-items: center; // 垂直居中
width: 200px;
height: 200px;
background: #ff0000;
&_item{
width: 50px;
height: 50px;
background: #b3de1b;
}
}
}
</style>
7.2、flex-shrink
<template>
<div class="container">
<div class="flex">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
<div class="flex_item">4</div>
<div class="flex_item">5</div>
<div class="flex_item">6</div>
<div class="flex_item">7</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.container{
.flex{
display: flex;
width: 200px;
height: 200px;
background: #ff0000;
&_item{
width: 50px;
height: 50px;
background: #b3de1b;
flex-shrink: 0; // 表示Flex项目在空间不足时的缩小比例。flex-shrink的默认值为1，数值越大，缩小比例越多，设置为 0 不缩放 。
}
}
}
</style>
7.3、flex-wrap: wrap; / 换行
7.4、 align-content: flex-start; / 多行项目对齐于交叉轴的起始位置
八、过程记录
8.1、display flex 和 inline-flex区别
| display | flex | inline-flex |
| 布局方向不同 | display:flex是主轴水平方向排列 | display:inline-flex是主轴垂直方向排列 |
| 元素占用空间不同 | display:flex元素会占据一行（即父元素宽度） | display:inline-flex元素只占据它所包含内容的空间 |
| 默认属性不同 | display:flex默认属性是flex-direction:row | display:inline-flex默认属性是flex-direction:row-reverse |
| 元素排列方式不同 | display:flex元素默认排列方式为flex-start | display:inline-flex元素默认排列方式为baseline |
参考链接
处理：end value has mixed support, consider using flex-end instead_星月I随心的博客-CSDN博客