前端学习记录19-移动端布局-Flex布局

flex布局原理

flexible Box 弹性布局

用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当我们为父级盒子设为flex布局后，子元素的float，clear和vertical-align属性将失效

采用flex布局的元素，称为flex容器，简称容器。
它的所有子元素自动 成为容器成员 称为flex项目，简称项目

flex布局父级常见属性

属性	属性值	说明
flex-direction	row 默认值 从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上	设置主轴的方向
justify-content	flex-start 默认值 从头部开始 如果主轴是x轴 就是从左到右 flex-end 从尾部开始排列 center 在主轴居中对齐 如果x轴是主轴 水平居中 space-around 平分剩余空间 space-between 先两边贴边 再评分剩余空间 比较重要 多数样式都是这个	设置主轴上的子元素排列方式
flex-wrap	nowrap 不换行 默认值 wrap 换行	设置子元素是否换行 flex在默认情况下 所有的项目都在一行上 如果项目超出容器 则会缩小项目的大小 把新插入的项目挤进来
align-items	flex-start 默认值 从上到下 flex-end 从下到上 center 挤在一起居中 垂直居中 stretch 拉伸 使用stretch 子元素是不能给高度的 y轴为侧轴时	设置侧轴上的子元素排列方式(单行) 使用justify-content 只能设置单一的 居中 水平居中或垂直居中 如果要同时使用 需要加入align-items 来控制侧轴
align-content	flex-start 在侧轴头部开始排列 跟正常的属性不太一样 有变化 会调整侧轴元素之间的距离 flex-end 在侧轴尾部开始排列 center 在侧轴中间显示 space-around 子项在侧轴平分剩余空间 space-between 子项在侧轴先分布在两头 再平分剩余空间 stretch 子项元素高度平分父元素高度	设置侧轴上的子元素的排列方式(多行) 必须有flex-wrap:wrap;才有效 不换行的时候没用 单行的align-items 只控制单行 多行的align-centent 只控制多行 单行不生效
flex-flow	flex-flow: column wrap;	简写主轴方向和换行

align-content和align-items 区别

align-items 适用于单行情况 只有上对齐、下对齐、居中和拉伸
align-content 适用于多行情况 单行无效 可设置 上对齐、下对齐、居中、拉伸、平均分配剩余空间
单行align-items 多行align-content

flex布局子级常见属性

属性	属性值	说明
flex	一般写数字，没有单位 1就是1份 也可以使用20%这样的属性，如果有10个盒子分成两行显示就需要这个属性	子项目占的份数
align-self	属性和align-items差不多	可允许某单个项目拥有不一样的对齐方式
order	默认为0，数值越小排列越靠前	属性定义子项的排列数序(前后顺序) 和z-index不同 order是排序序列顺序 z-index层叠顺序