flex布局的基本概念

Jax的试炼

已于 2022-05-21 12:16:55 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端杂记文章标签： css html 前端

于 2022-05-18 21:00:43 首次发布

本文链接：https://blog.csdn.net/lzllxll/article/details/124850801

前端杂记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Flex布局的基本概念，包括主轴、交叉轴、起始线和终止线，以及如何通过`flex-direction`、`flex-wrap`属性调整元素排列。此外，还详细阐述了`align-items`和`justify-content`用于设置元素在交叉轴和主轴上的对齐方式，帮助开发者掌握强大的Flex布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex box是一种一维的布局模型，给他的子元素提供了强大的空间分布和对齐能力。

我们说 flexbox 是一维的模型，因为它每次只能处理行模式或者列模式。和它对应的是Grid Layout，可以同时处理行和列的布局。

flexbox有两根轴线，分为主轴和交叉轴。

主轴

主轴通过 flex-direction来设置，它的取值可能是：

row – x轴为主轴，也是浏览器的默认值，水平从左至右排列
row-reverse – x轴为主轴，水平从右至左排列
column – y轴为主轴，是很多移动应用框架的默认值，如RN。垂直从上至下排列
column-reverse – y轴为主轴，垂直从下至上排列

交叉轴

与主轴垂直交叉的另一根轴线。理解了主轴和交叉轴的概念对后续的排列和对齐非常有用。

起始线和终止线

轴和轴的方向都是不固定的，单纯使用上下左右来描述就不太好理解了，这就引出了轴的起始线和终止线，默认情况是这样的：

flex box是一种一维的布局模型，给他的子元素提供了强大的空间分布和对齐能力。
我们说 flexbox 是一维的模型，因为它每次只能处理行模式或者列模式。和它对应的是Grid Layout，可以同时处理行和列的布局。
flexbox局部模型，有两根轴线，分为主轴和交叉轴。

主轴

主轴通过 flex-direction来设置，它的取值可能是：

row – x轴为主轴，也是浏览器的默认值，水平从左至右排列
row-reverse – x轴为主轴，水平从右至左排列
column – y轴为主轴，是很多移动应用框架的默认值，如RN。垂直从上至下排列
column-reverse – y轴为主轴，垂直从下至上排列

交叉轴

与主轴垂直交叉的另一根轴线。理解了主轴和交叉轴的概念对后续的排列和对齐非常有用。

起始线和终止线

轴和轴的方向都是不固定的，单纯使用上下左右来描述就不太好理解了，这就引出了轴的起始线和终止线，默认情况是这样的：

随着我们设置 flex-direction，两个轴和轴的起始线和终止线也会随着发生变化。我们后续随着概念的深入再继续讨论。

Flex容器

设置display属性为flex或者inline-flex后，即可将容器变为Flex容器。设置后，Flex容器的直属子元素都会变成flex元素。父子元素的相关css属性也初始化默认值。
默认的flex元素会发生如下行为：

所有元素并为一行，从主轴的起始线开始，向终止线排列。（flex-direction的默认值为row）。
若flex元素不够交叉轴的高度，那么会被拉伸至填满交叉轴的起始和终止线。
元素不会在主轴方向被拉伸（默认未设置flex元素的flex），但是可能会被压缩，当被压缩后仍然一行放不下时，flex元素会溢出，而且不会换行。
flex-wrap默认值为nowrap，这也是上边行为不换行的原因。
flex-basis默认值为auto。（flex元素的默认尺寸，后文讨论）

下例就是flex元素的默认行为

 点击查看【codepen】

flex-direction 更改主轴或者起止线

用来更改flex元素的排列方向，是最常用的flex属性，有以下4个属性：

row

x轴做为主轴，浏览器的默认值，如上例。

row-reverse

该属性仍然以x轴为主轴，但是主轴的起始线和终止线会交换，可以理解成阿拉伯文，从右至左有序排列。
点击查看【codepen】

column

主轴和交叉轴交换，可以试着把头向右倾斜90度，他还是符合上述规则的。
点击查看【codepen】

column-reverse

此时y轴是主轴，同理，交换主轴的起始线和终止线。脑袋向左倾斜90度。

flex-wrap

f12缩小窗口查看Demo

nowrap

浏览器的默认值，也就是能挤挤就挤挤，挤不下就溢出，但就是不换行。

wrap

不压缩flex元素的尺寸，放不下了就换行。每一行都可以当作独立的flex容器来排列。

wrap-reverse

和wrap的行为一致，但是交叉轴的起始线和终止线会交换位置。即换行的元素会倒叙排列。

“不常用”元素属性

flex-grow，flex-shrink，flex-basis这三个属性很少能直接见到，大多是通过flex简写形式来设置的。

flex-basis：用来设置flex元素在主轴上所占空间。x轴为主轴时，它就相当于宽度，y轴为主轴时，他就相当于高度，且它的优先级要比width和height要高，同时设置的话with和height不会生效。它的取值可以是如下几种：
- auto：默认值，意为参照“我”的width和height (中间经过几次改版，最终就是这样)
- <length>或者百分数：就像设置width那样
- "content"：不推荐使用，它的兼容性并不是很好，尤其safari，是一个也不支持，感兴趣的可以去官网查看
flex-grow：用来设置flex元素的增长因子，也就是在剩余空间中的空间分配比例，会拉伸元素。
- 0：不延伸
- 1：通常设置为1，最长用的场景就是让一个元素撑满父元素
- 其他大于1的数字：用在多个flex元素都需要延伸的情况，flex模型会根据多个flex-grow值按比例分配空间。

flex-shrink：和flex-grow相反，它是用来设置flex元素的收缩因子。仅在flex元素的默认宽度只和大于容器宽度时触发，只能设置<number>类型，默认值是雨露均沾的1。

使用flex简写设置元素属性

绝大多数时候，我们都通过flex来简写上述的3个属性，具体的写法包括如下几种：

.flex-item {
  
  /* 设置3个属性，注意顺序 */
  /* flex: <flex-grow> <flex-shrink> <flex-basis> */
    
  /* 常见用法1: 相当于 flex: 1 1 0; 自由伸缩 */
  flex: 1;
  
  /* 相当于 flex: 1 1 auto; 以flex-basis为基础自由伸缩，如设置了width */
  flex: auto;
  
  /* 相当于 flex: 0 0 auto; 既不能拉伸也不能收缩 */
  flex: none;
}