flex布局

〔晴【天】º〕

已于 2024-01-30 15:27:58 修改

阅读量1.1k

点赞数

文章标签： css css3 html 前端

于 2023-06-17 21:56:18 首次发布

本文链接：https://blog.csdn.net/qq_43625134/article/details/131265078

版权

Flex 通常称为 flexbox 或 flex，也称为弹性盒子或弹性布局。一种比较高效率的 css3 布局方案。

因为是弹性盒子，首先需要一个容器 container，然后是项目 item。容器包裹着项目，再通过配置不同的属性，实现各种各样的排列分布。

flex 有两根轴线，分别是主轴和交叉轴，主轴的方向由 flex-diretion 属性控制，交叉轴始终垂直于主轴。

flex 的属性包括了容器 container 的属性以及项目 item 的属性。
使用 flex 属性，需要在容器 container 样式里加入display: flex;，我们才能够使用 flex 属性。

.header-div{
  display: flex;
}

flex-direction 属性，direction 是方向，指向的意思，所以这个属性主要用于改变轴线的方向。也就是项目的排列方向。

flex-direction属性包含了4个值：

flex-wrap属性用于指定的项目超过一行时，是否换行。

flex-wrap属性包含了3个值：

flex-flow 是 flex-direction 和 flex-wrap 的合并简写。

flex-flow: column wrap;
// 相当于
flex-direction: column;
flex-wrap: wrap;

justify 翻译过来是“使每行排齐、使齐行”，content 翻译过来是“内容”。合在一起大概意思就是使行的内容对齐的意思。所以，justify-content 是用于控制项目在主轴上的对齐方式。

justify-content有6个选项：

flex-start（默认）：项目在主轴方向上，以主轴起始位置对齐。从左至右。
flex-end：项目在主轴方向上，以主轴结束的位置对齐。靠右对齐。
center：项目在主轴方向上居中。
space-between：项目在主轴方向上，两端对齐，然后项目中间间隔是相等的。
space-around：在主轴方向上，剩余的空间被平均的分配到每个项目的两侧。
space-evenly：在主轴上，剩余的空间平均分配，与 space-between 不同的是，between 是在项目之间，而 evenly 是在轴的最左边和最右边也同样会有空间分配。

align-items 是控制项目在交叉轴上的对齐方式。

有5个选项：

align-content 控制多行项目（多根主轴线）对齐方式。类似 justify-content ，只不过，align-content 是控制行与行之间的空间分配，justify-content 是控制项目与项目之间的空间分配。

有7个选项：

stretch（默认）：交叉轴方向剩余的空间平均分配到每行，并且行的高度会拉伸，填满整行的空间。
flex-start：所有行在交叉轴方向上，以交叉轴的起始位置对齐。
flex-end：所有行在交叉轴方向上，以交叉轴的终点位置对齐。
center：所有行在交叉轴上居中对齐。
space-between：行在交叉轴方向上，两端对齐，然后行中间的间隔相等。
space-around：在交叉轴方向上，剩余的空间被平均的分配到每一行的两侧。
space-evenly：在交叉轴方向上，剩余空间平均分配，与 space-between 不同的是，between 是在行之间，而 evenly 是在轴的最左边和最右边也同样会有空间分配。