常用布局第二篇 —— flex布局
回顾
在上一篇中我们结束了流式布局，流式布局中主要是说了理论的知识比较多，最主要的还是移动端中的二倍图效果是非常重要。还有对于视口的效果，末尾之后我们又说了背景缩放的问题background-size，和特殊的样式例如兼容-webkit-等效果。基础还是需要好好学习。
flex布局原理
flex 是 flexble Box 的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，值得一提的是在现在大部分的工作中用flex布局的占比是非常大的，基本上现在较为基础的页面都是使用的flex布局。
- 当我们为父盒子设为flex布局以后，子元素的fkiat、clear和vertical-align 属性将无效
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
- 采用 flex 布局的元素，称为 flex 容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为 flex 项目（flex item）
- 例如：一个div包裹了若干个 span，那么对于div来说就是 flex的父容器，对于 span 来说就是 flex 的子容器。
- 子容器可以横向排列 也可以纵向排列
总结：flex布局原理 就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式
flex布局父项常见属性
flex-direction：设置主轴的方向
- flex-direction：row —— 默认从左到右
- flex-direction：row-reverse —— 从右到左 如下图
- flex-direction：column —— 从上到下
- flex-direction：column-reverse —— 从下到上
// 默认从左到右
flex-direction：row;
// 从右到左 如下图
flex-direction：row-reverse;
// 从上到下
flex-direction：column;
// 从下到上
flex-direction：column-reverse;
justify-content：设置主轴的子元素排列方式
- justify-content：flex-start —— 默认从头开始，如果主轴是 x 轴，则从左到右
- justify-content：flex-end —— 从尾部开始排列
- justify-content：center —— 在主轴居中对齐（如果主轴是 x 轴则水平居中）
- justify-content：space-around —— 平分剩余空间
- justify-content：space-between —— 先两边贴边，再评分剩余空间（重要）
// 默认从头开始，如果主轴是 x 轴，则从左到右
justify-content：flex-start
// 从尾部开始排列
justify-content：flex-end
// 在主轴居中对齐（如果主轴是 x 轴则水平居中）
justify-content：center
// 平分剩余空间
justify-content：space-around
// 先两边贴边，再评分剩余空间（重要）
justify-content：space-between
flex-wrap：设置子元素是否换行
- flex-wrap：nowrap —— 默认值，不换行
- flex-wrap：wrap —— 换行
// 默认值，不换行
flex-wrap：nowrap
// 换行
flex-wrap：wrap
注意：flex 布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里
align-items：设置侧轴上的子元素排列方式（单行）
- align-items：flex-start —— 默认值，从上到下
- align-items：flex-end —— 从下到上
- align-items：center —— 挤在一起（垂直居中）
- align-items：stretch —— 拉伸
// 默认值，从上到下
align-items：flex-start
// 从下到上
align-items：flex-end
// 挤在一起（垂直居中）
align-items：center
// 拉伸
align-items：stretch
align-content：设置侧轴上的子元素的排列方式（多行）
- align-content：flex-start —— 默认值在侧轴的头部开始排列
- align-content：flex-end —— 在侧轴的尾部开始排列
- align-content：center —— 在侧轴中间显示
- align-content：space-around —— 子项在侧轴平分剩余空间
- align-content：space-between —— 子项在侧轴先分布两头，再平分剩余空间
- align-content：stretch —— 设置子项元素高度平分父元素高度
// 默认值在侧轴的头部开始排列
align-content：flex-start
// 在侧轴的尾部开始排列
align-content：flex-end
// 在侧轴中间显示
align-content：center
// 子项在侧轴平分剩余空间
align-content：space-around
// 子项在侧轴先分布两头，再平分剩余空间
align-content：space-between
// 设置子项元素高度平分父元素高度
align-content：stretch
注意：设置子项在侧轴上的排列方式并且只能用于子项出现 换行的情况（多行），在单行下是没有效果的
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
- flex-flow属性是 flex-direction 和 flex-wrap 属性的复合属性
- flex-flow：row wrap;
// 复合属性
flex-flow：row wrap;
flex布局 子项 常见属性
flex：1（数字） —— 表示的是子项目分配剩余空间（占多少分）
// 表示占一份
div {
flex: 1
}
align-self：控制子项自己在侧轴上的排列方式
// 控制子项自己在侧轴上的排列方式 默认为 auto，其余的值和 align-items 值一样
// 表示指定的这个子项 从下到上
align-self：flex-end；
order： 属性定义项目的排列顺序
// 数值越小排名越靠前，如果不设置的话 默认为：0
order: 2;
结束
好了，今天 flex 布局 基本上就结束了，关于flex 布局还是需要好好学习，因为接下来工作中使用 flex 布局会越来越多。需要你熟练掌握。 有问题欢迎留言~
