flex弹性布局

flexbox介绍

• 概念：flex = flex(ible) layout box model，弹性盒式模型
• 特点：它能够更加高效方便控制元素的对齐，排列，更重要的是能够自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的。
• 布局模型(Layout Model)
  black-layout：块布局模型
  inline-layout：行内布局模型
  table-layout：表格布局模型
  positioned-layout：定位布局模型
  flexible-box-layout：弹性布局模型
  grid-layout：栅格布局模型

flexbox.png

伸缩容器属性

display属性

• 概念：设置容器为伸缩容器
• 语法：display:flex | inline-flex
• 参数：不解释，与block/inline-block类似

.flex-container {
    display:flex;
}

flex-direction属性

• 概念：定义子元素在主轴的排列方向，也就是主轴的方向
• 语法：flex-direction: row(默认) | row-reverse | column | column-reverse
• 参数：
  row：横向排列，从左到右
  row-reverse：横向排列，从右到左
  column：纵向排列，从上到下
  column-reverse：纵向排列，从下到上

.flex-container {
    display:flex;
    flex-direction: column-reverse;
}

flex-wrap属性

• 概念：定义子元素是否换行
• 语法：flex-wrap: nowrap(默认) | wrap | wrap-reverse
• 参数：
  nowrap：不换行
  wrap：换行
  wrap-reverse：换行，倒序(第二行在上，第一行在下)

flex-flow属性

• 概念：由flex-direction属性和flex-wrap属性组成的复合属性
• 补充：使用此属性要遵循团队习惯，然后遵循个人习惯。考虑到可读性，个人建议不要使用此属性，而是分开写。

.flex-container {
    display:flex;
    flex-flow: row-reverse wrap;
}

justify-content属性

• 概念：控制子元素在主轴的对齐模式
• 语法：flex-start(默认) | flex-end | center | stretch | space-between | space-around
• 参数：
  flex-start：主轴的开始位置
  flex-end：主轴的结束位置
  center：主轴的中间位置
  space-between：空格间隔
  space-around：空格环绕

.flex-container {
    display:flex;
    flex-direction: row;
    justify-content: space-between;  /*伸缩项目两边碰 中间空间平均分*/
    justify-content: space-around;   /*伸缩项目平均分 剩余空间两边碰*/
}

align-items属性

• 概念：控制子元素在交叉轴上的对齐模式
• 语法：align-items: flex-start | flex-end | center | baseline | stretch
• 参数：
  flex-start：交叉轴的开始位置
  flex-end：交叉轴的结束位置
  center：交叉轴的中间位置
  stretch：在交叉轴上拉伸
  baseline：在交叉轴上以基线对齐

.flex-container {
    display:flex;
    align-items: center;
}

// 实现垂直居中对齐
.flex-container {
    display:flex;
    justify-content: center;
    align-items: center;
}

align-content属性

• 概念：控制容器内多行在交叉轴上的排列方式
• 语法：align-content: flex-start(默认) | flex-end | center | stretch | space-between | space-around
• 参数：
  flex-start：交叉轴的开始位置
  flex-end：交叉轴的结束位置
  center：交叉轴的中间位置
  stretch：拉伸对齐
  space-between：空格间隔
  space-around：空格环绕
• 补充：只适合多行，且flex-wrap=wrap(换行)的情况

.flex-container {
    display:flex;
    flex-wrap: wrap;
    width: 150px;
    height: 250px;
    align-content: center;
}

伸缩项目属性

order属性

• 概念：控制子元素出现在父容器的顺序
• 语法：order: 0(默认) | 正整数 | 负整数
• 补充：数值越小越靠前，也就是说，负整数会比0更靠前

.flex-container {
    display: flex;
}
.flex-item:nth-child(1) {
    order:3;  // 第四位
}
.flex-item:nth-child(2) {
    order:1;  // 第三位
}
.flex-item:nth-child(3) {
    order:-1;  // 第一位
}
.flex-item:nth-child(4) {
    order:0;  // 第二位
}

flex-grow属性(伸展)

• 概念：分配伸缩容器的剩余空间
• 语法：flex-grow: 0(默认) | 正数
• 注意：
  1，不能为负值
  2，设置为0，不分配剩余空间
  3，设置为同一数值，空间AA制，对除了内容以外的空间，做了平均分配
  4，设置为不同数值，谁大地谁多

.flex-container {
    display: flex;
}
.flex-item {
    flex-grow: 1;
}

flex-shrink属性(收缩)

• 概念：当容器的剩余空间不足以容纳项目的时候，比谁能受委屈
• 语法：1(默认) | 正数 | 0
• 注意：
  1，不能为负值
  2，设置为0，不受委屈
  3，设置为同一数值，受同样的委屈
  4，设置为不同数值，谁大谁受委屈

.flex-container {
    display: flex;
    width: 300px;
}
.flex-item:nth-child(1) {
    width: 100px;
}
.flex-item:nth-child(2) {
    width: 200px;
}
.flex-item:nth-child(3) {
    width: 150px;
    flex-shrink: 0;
}

flex-basis属性(基准)

• 概念：基准？原来是计算前刨去的空间
• 解释：伸缩项目分配空间 = 伸缩容器的空间 - basis设置的空间 - 其他子元素的width(若无则为其他内容占的空间)
• 语法：flex-basis: auto(默认) | [width] | 0
• 参数：
  [width]： width可以设置的值，这里也的都可以设置(比如Npx,Nrem...)
  0：计算伸缩项目分配空间的时候，flex-basis=0的项目内容所占的空间会被认为是0

• 补充：如果所有项目的flex-basis属性都设置为0，那么就是绝对均分容器空间

  
  
  

  flex-basis.png
  
  

  注意这里的1,1,2是指flex-grow属性值，从这张图可以看出0 和 atuo的区别

.flex-container {
    display: flex;
}
.flex-item {
    flex-grow: 1;
}
.flex-item:nth-child(1) {
    flex-basis:150px;
    width:200px;
}

flex属性

• 概念：伸展(flex-grow) 收缩(flex-shrink) 基准(flex-basis)的复合属性
• 语法：1 0 auto | none | 0 | * * *

.flex-item:nth-child(1) {
    // flex:1 0 auto
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
}

.flex-item:nth-child(1) {
    // flex:none
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

.flex-item:nth-child(1) {
    // flex:0
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 0;
}

// 视内容为没有，从整体上划分空间
.flex-item:nth-child(1) {
    // flex:1
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}
.flex-item:nth-child(2) {
    // flex: 2;
    flex-grow: 2;
    flex-shrink: 0;
    flex-basis: 0;
}
.flex-item:nth-child(3) {
    // flex: 3;
    flex-grow: 3;
    flex-shrink: 0;
    flex-basis: 0;
}
.flex-item:nth-child(4) {
    // flex: 4;
    flex-grow: 4;
    flex-shrink: 0;
    flex-basis: 0;
}

align-self属性

• 概念：在交叉轴上怎么对齐，自己说了算
• 语法：align-self: auto(默认值) | flex-start | flex-end | center | baseline | stretch
• 注意：如果伸缩项目设置有align-self且值不为auto，那么会覆盖伸缩容器为其设置的伸缩方式

.flex-container {
    display: flex;
    height: 250px;
    align-items: center;
}
.flex-item:nth-child(1) {
    align-self: auto;  // 使用父容器设置的属性值：center
}
.flex-item:nth-child(2) {
    align-self: flex-start;  // 使用本身的属性值：flex-start，无视父容器设置的属性值
}