移动端-flex弹性布局

flex弹性布局

布局原理
flex是flexible Box的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局

• 当我们为父盒子设置为flex布局一以后，子元素的float、clear和vertical-align属性都将失效
• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”，它的所有子元素自动成为容器的成员，称为Flex项目（flex item），简称“项目”

• 子容器可以横向排列也可以纵向排列

总结flex布局原理：
就是通过给父盒子添加flex属性，来控制盒子的位置和排列方式

1. 默认主轴方向是x轴方向，水平向右
2. 默认侧轴方向是y轴方向，垂直向下

常见父项选项

• flex-direction: 设置主轴的方向
• justify-content: 设置主轴上的子元素排列方式
• flex-wrap: 设置子元素是否换行
• align-content: 设置侧轴上的子元素的排列方式（多行）
• align-items: 设置侧轴上的子元素排列方式（单行）
• flex-flwo: 复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction设置主轴的方向
flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，我们的子元素是跟着主轴来排列的

justify-content设置主轴上的子元素排列方式
jsutify-content属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是那个

flex-wrap设置子元素是否换行
默认情况下，项目都排在一条线上（又称“轴线”）上，flex-wrap属性定义，flex布局中默认是不换行的

align-items设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候用

align-content设置侧轴上的子元素排的列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的的情况（多行），在单行下是没有效果的

align-content和align-items的区别

• align-items适用于单行情况下，只有上对齐、下对齐、居中对齐和拉伸
• align-content适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
• 总结就是单行找align-items 多行找align-content

flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex-flow: row wrap;

flex布局子项常见属性

flex: 子项项目占的份数

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.itme {
    flex: <number>; /* default 0 */
}

align-self: 控制子项自己在侧轴的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则同等于stretch

span:nth-chid(2) {
    /* 设置自己在侧轴上的排列方式 */
    align-self: flex-end;
}

order: 属性定义子项的排列方式（前后顺序）

数值越小，排列越靠前，默认为0
注意：和z-index不一样

span:nth-chid(2) {
    order: -1;
}