📌前言
Flexible Box模型，通常被称为flexbox，是一种一维的布局模型。它给
flexbox的子元素之间提供了强大的空间分布和对齐能力 , 可以实现各种布局模式。作为对比的是另外一个二维布局
CSS Grid Layout这个后续有时间在更新。
下面我将自己的理解通俗易懂的描述出来 , 如有错误 ，请大佬留言。
一、flex布局概念
通过css以下方式可以指定为flex容器 , 容器默认存在两根轴：水平向右的主轴和垂直向下的交叉轴 , 下面会进行简单介绍。
- 默认为 水平向右不换行
<div class="list">
<div class="item" v-for="item in 8" :key="item">
{{ item }}
</div>
</div>
.list {
display: flex;
width: 520px;
height: 520px;
padding: 10px;
border: 1px solid #aaaaaa;
}
.item {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
color: #ffffff;
background: #00aafff0;
border: 1px solid #ffffff;
}
注意: 任何一个容器都可以指定为Flex布局。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
二、容器属性
| 属性名 | 说明 |
|---|---|
| flex-direction | 决定主轴的方向 |
| flex-wrap | 是否换行&换行方向 |
| flex-flow | flex-direction属性和flex-wrap属性的简写形式 |
| justify-content | 主轴上的对齐方式 |
| align-items | 交叉轴上的对齐方式 |
| align-content | 多根轴线的对齐方式 |
下面将对这些属性进行 一 一 介绍。
1、flex-direction 主轴的方向
决定主轴的方向 , 既容器内元素排列方向
| 值 | 描述 |
|---|---|
| row | 默认值 主轴水平向右 |
| row-reverse | 主轴水平向左 |
| column | 主轴垂直向下 |
| column-reverse | 主轴垂直向上 |
2、flex-wrap 换行&方向
有时候一行是放不下所有item子元素的 , 那是否换行该怎么换行就应该要进行考虑了
| 值 | 描述 |
|---|---|
| nowrap | 默认值 不换行 |
| wrap | 正向换行 (主轴水平向下 主轴垂直向右) |
| wrap-reverse | 反向换行 (主轴水平向上 主轴垂直向左) |
flex-wrap: nowrap 不换行
主轴水平方向
主轴垂直方向
2.5、flex-flow 上述两种属性简写
flex-direction属性和flex-wrap属性的简写形式
flex-flow: [flex-direction] [flex-wrap]
flex-flow: row nowrap;
3、justify-content 主轴上的对齐方式
| 值 | 描述 |
|---|---|
| flex-start | 默认值 起点对齐 |
| flex-end | 终点对齐 |
| center | 居中 |
| space-between | 两端对齐，子元素之间的间隔都相等 |
| space-around | 间隔对齐，子元素两侧的间隔相等 |
下面以水平主轴为例–相信垂直主轴你们能想象出来的
4、align-items 交叉轴的对齐方式
| 值 | 描述 |
|---|---|
| stretch | 默认值 如果项目未设置高度或设为auto，将占满整个容器的高度 |
| flex-start | 起点对齐 |
| flex-end | 终点对齐 |
| center | 居中 |
| baseline | 项目的第一行文字的基线对齐(不常用) |
5、align-content多根轴线的对齐方式
| 值 | 描述 |
|---|---|
| stretch | 默认值 轴线占满整个交叉轴 |
| flex-start | 起点对齐 |
| flex-end | 终点对齐 |
| center | 居中 |
| space-between | 两端对齐，子元素之间的间隔都相等 |
| space-around | 间隔对齐，子元素两侧的间隔相等 |
二、子元素属性
除了容器以外 , 子元素也有属性配置
| 属性 | 描述 |
|---|---|
| order | 排列顺序, 数值越小，排列越靠前，默认为0 |
| flex-grow | 放大比例，默认为0 |
| flex-shrink | 缩小比例,默认为1,空间不足，该项目将缩小 |
| flex-basis | 分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 |
| flex | flex-grow, flex-shrink 和 flex-basis的简写,后两个属性可选。 |
| align-self | 单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 |
下面单独对2号元素进行操作
注意: 缩小只有空间不足下有效
还有几个不常用不做演示了 , 感兴趣的可以去查一下 (作者没使用过😺)
📚 总结
希望在学习过程中 , 这篇文章能对你起到帮助!
原文链接：https://juejin.cn/post/7351708519177355298 作者：moodEngineer
