🔥一篇学会css弹性布局flex

📌前言

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号元素进行操作

注意: 缩小只有空间不足下有效

还有几个不常用不做演示了 , 感兴趣的可以去查一下 (作者没使用过😺)

📚 总结

希望在学习过程中 , 这篇文章能对你起到帮助!