移动端开发的flex布局 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天

（仅供自己参考，技术点请看字节整理的资料和相应官方技术文档）

这是前端基础系列里的第4篇《移动端开发的flex布局》

flex布局

flex布局原理

• flex 是 flexible Box 的缩写，意为"弹性布局"

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

• 为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效

• flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局

• Flex 容器的所有子元素自动成为容器成员

• 父项常见属性

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

• 父项常见属性值

  • flex-direction设置主轴的方向

  在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
  		默认主轴方向就是 x 轴方向，水平向右
  		默认侧轴方向就是 y 轴方向，水平向下
  		
  		主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴
  		属性值及含义
  			row：默认值从左到右
  			row-reverse：从右到左
  			column ： 从上到下
  			column-reverse：从下到上
  
  

• justify-content 设置主轴上的子元素排列方式

  flex-end 从尾部开始排列
  center 在主轴居中对齐（如果主轴是x轴则水平居中）
  space-around 平分剩余空间
  space-between 先两边贴边，再平分剩余空间（重要）
  
  

• flex-wrap设置是否换行

  flex-wrap属性定义，flex布局中默认是不换行的。
  nowrap 不换行
  wrap 换行
  
  

• align-items 设置侧轴上的子元素排列方式（单行 ）

  flex-start 从头部开始
  flex-end 从尾部开始
  center 居中显示
  stretch 拉伸
  

• align-content 设置侧轴上的子元素的排列方式（多行）

  flex-start 默认值在侧轴的头部开始排列
  flex-end 在侧轴的尾部开始排列
  center  在侧轴中间显示
  space-around 子项在侧轴平分剩余空间
  space-between  子项在侧轴先分布在两头，再平分剩余空间
  stretch 设置子项元素高度平分父元素高度
  

• align-content 和align-items区别

   align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。 
   总结就是单行找align-items  多行找 align-content
   flex-flow 属性
   是 flex-direction 和 flex-wrap 属性的复合属性
   flex-flow:row wrap;
  

flex布局子项常见属性

	flex 属性
		flex 属性定义子项目分配剩余空间，用flex来表示占多少份数
		.item {
flex: <number>; /* 默认值 0 */

}

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

  默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 
  span:nth-child(2) {
  /* 设置自己在侧轴上的排列方式 */
  align-self: flex-end;
  }
  order 属性定义项目的排列顺序
      数值越小，排列越靠前，默认为0
      .item {
  order: <number>;
  }
      注意：和 z-index 不一样