Flex container的样式

让一个元素变成flex布局

.container{
 display: flex;/* or inline-flex */
}

改变iteams的流动方向（主轴）

• 从上到下

  flex-direction: column;
  

• 从下到上

  flex-direction: column-reverse;
  

• 从左往右

  flex-direction: row;
  

• 从右往左

  flex-direction: row-reverse;
  

效果图查看

改变折行

• 默认状态下是flex-wrap: nowrap;：

  

• 从顶部开始折行用flex-wrap: wrap;：

  

• 从底部开始折行用flex-wrap: wrap-reverse;：

  

主轴对齐方式

• 尽量向开始处靠

  justify-content: flex-start;
  

  

• 尽量向后靠

  justify-content: flex-end;
  

  

• 居中

  justify-content: center;
  

  

• 将多余的空间放在间隙中

  justify-content: space-between;
  

  

• 将多余的空间围绕在每个item两边

  justify-content: space-around;
  

  

• 平均分配多余的空间

  justify-content: space-evenly;
  

  

次轴对齐方式

• 次轴默认对齐方式

  align-items: flex-start;
  

  

• 居中

  align-items: center;
  

  

• 底部对齐

  align-items: flex-end;
  

  

• 一样高

  align-items: stretch;
  

  

  注：不设定高度，由内容来自由填充；

多行内容

• 默认状态下

  

• 内容放在最上面

  align-content: flex-start;
  

  

• 内容放在最下面

  lign-content: flex-end;
  

  

• 内容放中间

  align-content: center;
  

  

• 将多余空间平均分在内容间隙中

  align-content: stretch;
  

  

• 把多余的空间放中间

  align-content: space-between;
  

  

• 多余的空间围绕着内容

  align-content: space-around;
  

  

Flex item的样式

正文之前，先说个选择器的事

当某元素有几个相同名字的孩子时，如：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

如何指定其中一个孩子：

.item:first-child{
  
}/*第一个item孩子*/
.item:nth-child(2){
  
}/*第二个item孩子*/
.item:nth-child(3){
  
}/*第三个item孩子*/
.item:nth-child(4){
  
}/*第四个item孩子*/
.item:last-child{
  
}/*最后一个item孩子*/

item上面加个order

• 默认顺序

  

• 当我给第一个孩子和第二个孩子添加order后：

  .item:first-child{
    order: 5;
  }
  .item:nth-child(2){
    order: 1;
  }
  .item:nth-child(3){
  
  }
  .item:nth-child(4){
  
  }
  .item:last-child{
  
  }
  

  顺序变成：

  

  注：由于3、4、5没有加order，默认状态的order是0，所以按照从小到大排列的结果就是如图所示的结果；order也可以是负数；

控制长胖

• 当我们不设定宽度时，item是能有多窄有多窄，即默认状态下：

  flex-grow: 0;
  

  

如何长胖？

• 让所有的item等比例长胖：

  flex-grow: 1;
  

  

• 每个item长胖程度不一样：

  .item:first-child{
    flex-grow: 1;
  }
  .item:nth-child(2){
    flex-grow: 2;
  }
  .item:nth-child(3){
    flex-grow: 1;
  }
  

  

控制变瘦

• 默认是一起变瘦：

  flex-shrink: 1;
  

• 防止变瘦：

  flex-shrink: 0;
  

• 对于其他值，值越大变瘦的越快

控制基准宽度

flex-basis: 100px;

注：默认是auto；

缩写，空格隔开

flex: flex-grow flex-shrink flex-basis;

align-self定制align-items：让某个item特立独行

.item:nth-child(4){
  align-self: flex-end;
 }

实战

Flex青蛙游戏