【CSS基础】flex布局的个人使用记录（非教学）

前言

这个css特性算是高频使用特性了，而且面试中有时候也会当作上机题，这时候就不会有代码提示了 >_<。

特点

1. 在得不到父级高度的情况下也能将子级中心定位；
2. 脱离文档流的子级也能作用到；
3. 子级自动转换成行内块级元素；
4. 子级宽高具有弹性；
5. 子元素的float、clear和vertical-align属性将失效；

前置知识

轴

从方向的角度：

分为默认的主轴（横向）和交叉轴（纵向）

从位置的角度：

分为起始点和终点

使用

父级（容器）

以下是通过父级的角度去控制子项的排列；

启动flex

display: flex;

改变主轴方向 flex-direction

注意：这个属性，子项也是会相应的调整顺序。所以理解为改变主轴的指向更好；

flex-direction: row; 正横向（默认）
flex-direction: row-reverse; 反横向
flex-direction: column; 纵向
flex-direction: column-reverse; 反横向

设置主轴的排列方式 justify-content

可按照英文直译记住 justify：使齐行；content：内容；

justify-content: flex-start; 从起始点开始（默认）
justify-content: flex-end; 从终点开始
justify-content: center; 中点排列
justify-content: space-around; 均匀排列
justify-content: space-between; 左右顶格后均匀排列

设置交叉轴的排列方式 align-items

除了没有space-between，其他的和设置主轴的一致；然后还多了：

align-items: baseline; 字体基线对齐
align-items: stretch; 容器没有设置高度或auto则子项占满整个高度

设置是否换行 flex-wrap

flex-wrap: nowrap; 不换行（默认）宁愿缩减宽高也不换行
flex-wrap: wrap; 可以换行
flex-wrap: wrap-reverse; 可以反向换行

注意：

1. 换行上下行之间会产生行距；
2. 使用align-content会自动去除行距；
3. 使用align-item保持行距；

设置主轴方向和换行的简写 flex-flow

flex-flow: 主轴方向 换行;

设置多根轴线的排列方式 align-content

如果子项只有在一根轴线，该属性不起作用。记住出现了多轴排列就要用这个了。

align-content: xxx; // 同justify-content属性

多了个
align-content: stretch; 每一行都被拉伸以填满容器

---

子项（伸缩项目）

以下是直接控制子项的排列；学会灵活的配合父级使用能够走很多布局的捷径。

手动排序 order

order: 数字; // 表示子级的排序方式，每一个子级默认order为0，如果想排前就-1，排后就1

如果排前或者排后的方向没有其他子项了，那么就是直接排最前去，例如

.yellow {
	order: 1;
}

单独设置交叉轴的排列方式 align-seft

align-seft: flex-start; 表示这个项目交叉轴位置单独到起点
align-seft: flex-end; 表示这个项目交叉轴位置单独到终点

瓜分剩余容器宽度 flex-grow

flex-grow: 数字;

数字表示这个子项只能瓜分剩余宽度的比例

真正的意思是子项的放大比例；默认为0

如果有子项的宽度由内容决定了，建议给每个子项一个 max-width: xx%; 比如两个就给50%，或者给没有宽度的子项一个flex:1;

控制子项压缩的比例 flex-shrink

flex-shrink: 数字;

就是当子项们的总宽度大于容器时，子项会自动平分缩减大出去的宽度的平均份数。

而如果某一个子项flex-shrink: 2;说明它想压缩的比例为2/项目数

默认为1

更高优先级的宽度设置 flex-basis

flex-basis: 200px;

简写 flex

简写是flex-grow、flex-shrink与flex-basis的简写

flex: xxx; // xxx可以为以下

不写默认  0 1 auto
auto     意思为(1 1 auto)
none     意思为(0 0 auto)
自定义    只写一个代表grow / x x 200px

最后

推荐个网站练习一下flex布局小青蛙跳跳