移动响应式布局（二）

三、Flex弹性布局

0x1 Flex概念

1、弹性盒模型
它能够更加高效方便控制元素对齐、排列，更重要的是能够自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的。

2、变成弹性盒模型的步骤
Display: flex;
注：Display: inline-flex; 则父容器不会满屏显示，会变成inline的样式。

0x2 Flex 容器属性

• [flex-direction]

  • 定义子元素在主轴的排列方向
  • row 默认值 横向排列 从左到右
  • row-reverse 横向排列 从右到左
  • column 纵向排列 从上到下
  • column-reverse 纵向排列 从下到上

• [flex-wrap]

  • 控制元素换不换行
  • nowrap 默认值不换行，当宽度设置过大要换行时宽度值不生效
  • wrap 换行
  • wrap-reverse 倒序，换行

• [flex-flow]

  • 上面两个属性的合并写法
  • flex-flow：flex-directionflex-wrap；

• [align-content]

  • 控制容器内多行在交叉轴上的排列方式
  • flex-start 交叉轴开始的地方对齐
  • flex-end 交叉轴结束的地方对齐
  • center 交叉轴居中对齐
  • stretch 交叉轴拉伸对齐

• [justify-content]

  • 子元素在主轴上的对齐模式
  • flex-start 主轴起点对齐
  • flex-end 主轴终点对齐
  • center 居中对齐
  • space-between 伸缩项目两边碰中间空间平均分
  • space-around 伸缩项目平均分剩余空间两边碰

• [align-items]

  • 子元素在交叉轴上的对齐模式
  • flex-start 起点对齐
  • flex-end 终点对齐
  • center 居中对齐
  • baseline 子元素在交叉轴上以内容的基线为准来对齐
  • stretch 拉神对齐

垂直水平居中对齐：
justify-content：center；
align-items：center；

0x3w Flex 子元素属性

• [order]

  • 控制子元素出现在父容器的顺序
  • 默认0 任何整数 从小到大优先级越高
  • -1 无效，相当于不设置 优先级最高

• [flex-grow]

  扫描二维码关注公众号，回复： 2332013 查看本文章
  • 控制子元素所占父元素的空间比例
  • 默认0 任何数字 不能设置为负数
  • 设置为同一数值 空间相同
  • 设置为不同数值 空间按照数值比例分配
  • 注意，空间是除去内容本身剩下的空间，而不是包含内容的容器大小

• [flex-shrink]

  • 揭不开锅的日子里比谁能受屈
  • 默认值1 任何数字 不能为负数
  • 剩余空间不足 谁多委屈点
  • 我就不！设置为0

• [flex-basis]

  • 计算前刨去内容所占的空间
  • 默认auto
  • width 设置内容宽度
    

• [align-self]

  • 在交叉轴上怎么对齐自己说了算
  • flex-start flex-end center baseline stretch

四、Flex基础