H5 Flex 弹性布局

使用方式：

在需要使用flex 的样式表的选择器中设置 display:flex;

html{
    display: flex;
}

在父标签上需要设置的内容：

1、主轴方向

html{
    display: flex;
    flex-direction: ...;
}

flex-direction 的取值：

value	描述
row	主轴为横向，方向为从左往右
row-reverse	主轴为横向，方向为从右往左
column	主轴为纵向，方向为从上到下
column-reverse	主轴为纵向，方向为从下到上
inherit	从父标签继承

2、子标签在主轴上的对齐方式：

html{
    justify-content: ...;
}

justify-content 的取值：

value	描述
flex-start	从主轴的开始端对齐
flex-end	从主轴的结束端对齐
center	在主轴上居中对齐
space-around	在主轴上平局分布，有等宽的间距环绕在元素两端
space-between	起始和结束位置的元素会紧贴父标签的边缘，中间部分的元素等分间距
inherit	从父标签继承

3、子标签在副轴（与主轴垂直的交叉轴）上的对齐方式

html{
    align-items: ...;
}

align-items 的取值：

value	描述
flex-start	从副轴的开始端对齐
flex-end	从副轴的结束端对齐
center	在副轴上居中对齐
baseline	元素的第一行文字的基线对齐
stretch	如果元素没有设置宽/高或者auto ，此值会让元素占满父元素的宽/高
inherit	从父标签继承

4、设置子元素是否换行:

html{
    flex-wrap: ...;
}

flex-wrap 的取值：

value	描述
nowrap	不换行
wrap	换行 (换行，意味着出现了多条主轴, align-content 生效)
wrap-reverse	换行，并且第一行在下方(同上)

5、设置多个主轴的对齐方式：

html{
    // 当 align-content 生效，也就是存在了多条主轴的情况下，可以把每条主轴上的元素看为一个整体，每个整体在副轴上进行排列.
    // 以下设置每个值的效果就等同于子标签在主轴上的对齐效果（把轴线看做一个整体，多个整体的对齐效果）
    // 比较绕，其实就跟在主轴上显示子元素一样，但实际上是在副轴上对齐的主轴。
    align-content: ...;
}

align-content 的取值：

value	描述
flex-start	从副轴的开始端对齐
flex-end	从副轴的结束端对齐
center	在副轴上居中对齐
space-around	在主轴上平局分布，有等宽的间距环绕在元素两端
space-between	起始和结束位置的元素会紧贴父标签的边缘，中间部分的元素等分间距

设置在子标签上的属性

1、设置元素的排列顺序：

div {
    // order 取值是无单位的整数，数值越小，该元素的位置就越靠前，默认为 0
    order: ...;
}

2、设置元素占用父标签的范围大小：

div {
    // flex 是 flex-grow, flex-shrink, flex-basis 的简写，默认值为 0 1 auto ；后两个值可选，可以只设置前一个的值，为无单位的整数；
    // 可以理解为把父标签等分了多个子元素 flex 值得总和的份数，每个子元素的 flex 值就代表了该元素占了父标签份数的比例
    flex: ...;
}

3、设置单个元素的对齐方式，脱离同级标签的对齐方式（让某一个子元素显得比较另类）

div {
    // 当设置了这个属性，可以理解为在他的父标签上设置的 align-items 对应值的效果，单独应用到了该元素
    align-self: ...;
}

align-self 的取值：

value	描述
flex-start	从副轴的开始端对齐
flex-end	从副轴的结束端对齐
center	在副轴上居中对齐
baseline	元素的第一行文字的基线对齐
stretch	如果元素没有设置宽/高或者auto ，此值会让元素占满父元素的宽/高

以上便是个人对 flex 的简单理解，欢迎指正。