移动web第四天 flex布局

1.flex布局（伸缩布局、弹性布局）

​ 解决元素自适应过于复杂 父盒子设置为flex布局，float、vertial-align属性将失效

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

​ 特点：比较新、天生支持自适应

​ 使用步骤：给父盒子加上display:flex;此时父盒子称为容器，子元素称为项目

​ 给元素或项目添加属性，控制项目在容器中的大小和位置

​ 主轴和侧轴始终保持垂直 项目永远按主轴的方向排列 主轴不一定是从左往右的，看设置

2.容器（父盒子）属性

​ 设置主轴方向：flex-direction

​ flex-direction: row;（默认值）主轴方向从左往右

​ flex-direction: column;主轴方向从上往下

​ flex-direction: row-reverse;主轴方向从右向左 反方向的从左向右

​ flex-direction: column-reverse;主轴方向从下向上 反方向的从上向下

​ 设置主轴子元素排列方式：justify-content

​ justify-content：flex-start；（默认值）项目从起点到终点进行排列

​ justify-content：flex-end；项目从终点到起点进行排列，就是右对齐，子元素的顺序不变

​ justify-content：center；所有项目都居中

​ justify-content：space-around；空白在项目两侧，空白间距不等，平均分配的

​ justify-content：space-between；空白在相邻项目之间就是左边紧贴着左，右边紧贴着右，中间平分着

​ justify-content：evenly；空白在项目两侧，空白间距相等

​ 设置侧轴对齐方式：align-items

​ align-items：stretch；（默认值），当项目不设置height时，项目在侧轴方向上被拉伸至铺满容器

​ align-items：flex-start；在侧轴方向上项目靠近起点

​ align-items：flex-end；在侧轴上项目靠近终点

​ align-items：center；在侧轴方向上项目居中

​ 设置侧轴子元素的排列方式：align-content 针对于多行（换行）的项目

​ stretch （默认值）当项目不设置height时，项目在侧轴方向上被拉伸至铺满容器​ flex-start 在侧轴方向上项目靠近起点​ flex-end 在侧轴方向上项目靠近终点​ center 在侧轴方向上项目居中​ space-around 在侧轴方向上空白在项目两侧（空白间距不等）​ space-between 在侧轴方向上空白在相邻项目之间​ space-evenly 在侧轴方向上空白在项目两侧（空白间距相等）

​ 设置子元素是否换行：flex-wrap

​ flex-wrap：nowrap；默认值不换行，如果装不开，会缩小子元素的宽度，放到父元素里面

​ flex-wrap：wrap；换行

​ flex-direction和flex-wrap的复合属性：flex-flow 例如：flex-flow：row wrap；

3.项目（子元素）属性

​ 设置项目在主轴方向上占的大小：flex 分配剩余的空间

​ flex：数字； display：flex；不会继承 flex设置的是自适应 用flex可以是容器也可以是元素

​ 书写flex布局步骤：（1）找到父子关系，将父元素设置为display：flex；

​ （2）确定主轴方向

​ （3）使用flex属性设置子元素在主轴方向上的大小 就是设置自适应

​ （4）设置主轴对齐方式

​ （5）设置侧轴对齐方式

​ 设置单独的项目在侧轴的对齐方式：align-self

​ auto （默认值） 和大家的效果一样​ flex-start 项目靠近起点​ flex-end 项目靠近终点​ center 项目居中​ stretch 当项目不设置height时，项目在侧轴方向上被拉伸至铺满容器

​ 设置项目的排列顺序：order

​ order：纯数字； 数字越大，排列越靠后，和z-index很像