Flex布局 流式布局 伸缩布局透彻分析

• 传统的布局概念

  基于盒子容器，依赖 display 、position 、float三个属性，相互制约

• Flex布局概念

  1.Flex布局简称 “弹性布局” 或 “流式布局” 或 “”伸缩布局”，各有千秋。
  2.是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
  3.Flex提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
  4.缺点：兼容性问题，浏览器版本过低（比如IE9以下的不支持）。

• Flex实战演练

  先明确一下概念的东西：容器简称伸缩容器，容器里面的东西简称伸缩项，如图
  

  1. 排列方式（针对容器操作，作用于伸缩项）

  大容器加样式：display:flex; flex- direction:row;
  *说明：
  //display:flex 将容器变为伸缩容器。
  // flex- direction:row;(以一行排列，从左至右），反方向为flex- direction:row-reverse；
  // flex- direction:column;(以一列排列，从上至下），反方向为flex- direction:column-reverse；

  2. 主轴对齐方式（针对容器操作，作用于伸缩项）

  大容器加样式：display:flex; flex- direction:row;justify-content:flex-start;
  *说明：
  1.justify-content:flex-start; 把所有伸缩项沿主轴的起点方向对齐,效果如下图
  
  2.justify-content:flex-end; 把所有伸缩项沿主轴的终点方向对齐,效果如下图
  
  3.justify-content:center; 把所有伸缩项沿主轴的居中对齐,效果如下图
  
  4.justify-content:space-between;把所有伸缩项居中左右间隔平分（两端对齐）,效果如下图
  
  5.justify-content:space-around;把每个伸缩项左右都加一定的边距,效果如下图
  

  3. 侧轴对齐方式（针对容器操作，作用于伸缩项）

  大容器加样式：display:flex; flex- direction:row;justify-content:flex-start;align-items:flex-start;
  1.align-items:flex-start; 把所有伸缩项沿侧轴的起点方向对齐,效果如下图,
  
  2.align-items:flex-end; 把所有伸缩项沿侧轴的终点方向对齐,
  3.align-items:baseinline; 把所有伸缩项沿文字内容基线对齐,效果如下图
  
  4.align-items:stretch; 把所有伸缩项拉伸对齐,效果如下图
  

  4. 侧轴个别对齐方式（针对伸缩项操作，作用于伸缩项）

  伸缩项加样式：align-items:flex-start;*
  *说明：
  align-self的取值和align-items一样
  align-self:flex-end; 把第一个伸缩项沿侧轴底部对齐，如下图
  align-self:flex-start; 把伸缩项沿侧轴顶部对齐
  align-self:center; 把伸缩项沿侧轴居中对齐

  5. 换行与换行对齐（针对伸缩容器操作，作用于伸缩项），注意：换行对齐必须基于伸缩项换行

  例如：当容器的宽度为600px 容器内有3个300px的伸缩项
  大容器加样式：**display:flex; **
  *说明：
  A.flex-wrap:nowrap; 默认是不换行；
  B.flex-wrap:wrap; 换行； 如图
  
  C. align-content: flex-strat; 用于换行之后与侧轴起点对齐； 如图
  
  D. align-content: flex-end; 用于换行之后与侧轴终点对齐 ； 如图
  

  E. align-content: center; 用于换行之后与侧轴居中对齐； 如图
  

  F. align-content: space-between; 用于换行之后与侧轴上两端对齐 ； 如图
  

  G. align-content: space-around; 用于换行之后与侧轴环绕对齐； 如图
  

  H. align-content:stretch; 用于换行之后与侧轴上拉伸对齐； 如图
  

  I. flex-wrap:wrap-reverse; 反转换行； 如图
  

  6. 伸缩项排序（针对伸缩项操作，作用于伸缩项）

  order:0; 默认排序（数值越小，显示在前面，数值越大 越靠后）
  

  7. 伸缩项扩充（针对伸缩项操作，作用于伸缩项）

  场景：当伸缩项宽度之和小于容器的宽度时，希望伸缩项按比例自动填充，若伸缩项宽度总和不小于容器的宽度时，设置的flex-grow无效
  flex-grow:0;默认0，不进行扩充 值越大，所占的比例越大
  
  补充说明：
  

  8. 伸缩项缩小（针对伸缩项操作，作用于伸缩项）

  注意：flex-shrink:1；默认值为1 值越大，所占的比例越小
  
  

  9. 伸缩项宽度设置（针对伸缩项操作，作用于伸缩项）

  flex-basis:100px; 伸缩项宽度设置
  

  10. 伸缩项属性连写（针对伸缩项操作，作用于伸缩项）

  flex: 0 1 auto； 分别代表：扩充 缩小 宽度