css flex布局学习

css flex布局学习

网上有很多关于flex布局的教程，有些写的很不错，今天就用自己的理解写一篇博客吧，不追求术语的解释，尽量实用。

什么是flex布局

flex字面意思是弹性布局，是W3C提出的一种布局方式，为什么称之为弹性布局，是因为当你定义了一个元素为弹性布局时，它的子元素可以在大小未知时依然能很自然很优雅的布局在网页上，而不会到处乱飞。

flex的关键术语

喜欢看官方文档的可以去这里，术语解释在第二节官方文档

图片出自https://www.w3.org/TR/css-flexbox/#intro

大致意译一下，希望没有用过flex布局的可以对flex布局的基本概念有个大致的印象。

• main-axis: flex容器的主轴，以上图为例main-axis是从左至右，那么flex容器的子元素也会按照从左往右的顺序布局排列；

  注：main-axis的方向默认是水平从左至右，但也可以是从右至左，从上至下，从下至上，这取决于flex-direction的取值，后面会讲到

• cross-axis：flex容器的交叉轴，交叉轴对应的是主轴，方向由主轴方向决定，上图是从上至下；

  主轴从左至右—交叉轴从上至下
  主轴从右至左—交叉轴从下至上
  主轴从上至下—交叉轴从左至右
  主轴从下至上—交叉轴从右至左

• main-start,main-end: 简单理解就是flex容器主轴方向的开始和结束；

• cross-start,cross-end: flex容器的交叉轴方向的开始和结束；

• main size: 官方解释的很复杂，其实我理解就是flex容器的主轴方向的“长度”；

  注：这里我既没有说是宽度也没有说是高度，是因为主轴的方向有可能会变化，当主轴的方向是从上往下或从下往上，那么main size就应该是主轴方向的高度，当主轴的方向是从左往右或从右往左，那么main size就应该是主轴方向的宽度。这也是为什么官方文档说:“Its main size property is thus either its width or height property”

• cross size: flex容器的交叉轴方向的长度；

flex容器属性

所有实例均放在一个页面了，展开里面会有小解析

实例地址

可能加载有点慢…目前就用的是这个代码托管，以后找到好的换一个。
打开网址之后，点击右上角的Open in New window会看的更清楚。

• flex-direction：定义flex方向

1. row：方向从左至右；
2. row-reverse：方向从右至左；
3. column：方向从上至下；
4. column-reverse：方向从下至上；

• flex-wrap:

1. nowrap：不换行，即使被压缩变小
2. wrap：换行;
3. wrap-reverse:换行但反向；

• flex-flow：是flex-direction和flex-wrap的简写

.container {
  flex-flow: column wrap;
}
等同于
.container {
  flex-direction: column;
  flex-wrap: wrap;
}

• justify-content：定义子元素在主轴方向的对齐方式。

1. flex-start:主轴开始位置对齐;
2. flex-end:主轴结束位置对齐;
3. center:居中对齐;
4. space-between:子元素平均分布在flex容器，只是第一个子元素紧靠在flex主轴开始，前面无空间，最后一个子元素紧靠在flex主轴结束，后面无空间；
5. space-around：子元素平均分布在flex容器，子元素的左右均有相同的空间；

• align-items: 定义子元素在交叉轴方向的对齐方式

1. flex-start：交叉轴方向的开始位置对齐;
2. flex-end：交叉轴方向的结束位置对齐;
3. center：交叉轴方向居中对齐;
4. stretch：子元素没有设置高度时，将撑起整个flex容器;
5. baseline：子元素是按照其内容对齐;

• align-content：

  align-content和justify-content的区别在于，前者是按交叉轴方向对齐，后者是子元素按主轴方向对齐

  align-content和align-items的区别在于，前者是处理多行对齐，后者是处理单行对齐

  综上：align-content用于交叉轴多行对齐处理。

1. flex-start:交叉轴开始位置对齐;
2. flex-end:交叉轴结束位置对齐;
3. center:交叉轴居中对齐;
4. space-between:子元素平均分布在flex容器，只是第一个子元素紧靠在flex交叉轴开始，前面无空间，最后一个子元素紧靠在flex交叉轴结束，后面无空间；
5. space-around：子元素平均分布在flex容器，子元素的左右均有相同的空间；

flex容器子元素属性

• order：

1. 默认值为0；
2. 取值越小排列顺序越靠前；

• flex-grow：

1. 取值为正数，负数无效；
2. 定义了在有剩余空间时子元素的增长方式，具体看实例可能更好理解；

• flex-shrink：

1. 取值为正数，负数无效；
2. 定义了在子元素超出父容器的空间时，子元素的压缩方式，具体看实例可能更好理解；

• flex-basis：

1. 定义了子元素的初始化大小；

• align-self：

  align-self和align-items的区别：，align-items用于子元素一整行的对齐方式，align-self用于单个子元素的对齐方式

1. flex-start：交叉轴方向的开始位置对齐;
2. flex-end：交叉轴方向的结束位置对齐;
3. center：交叉轴方向居中对齐;
4. stretch：子元素没有设置高度时，将撑起整个flex容器;
5. baseline：子元素是按照其内容对齐;

参考文档及博客：

1. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2. https://www.w3.org/TR/css-flexbox/

首次写作时间：2020-05-17
第一次修改：2020-05-20，这次修改主要是更换了代码预览的网站，这次用了codepen,貌似比之前的stackblitz加载要快多了。