演示flex container 容器中的4个属性

1. flex-flow 弹性流,主轴方向(横向)是否换行

• 单行容器默认情况下是水平不允许换行,flex-direction, row, nowrap,而且可以自动拉伸。

• 演示

• {
  box-sizing: box-border;
  }
  :root {
  font-size: 10px;
  }
  body {
  font-size: 1.6rem;
  }
  .container {
  display: flex;
  height: 20rem;
  border: 1px solid #000;
  }
  .container > .item {
  width: 10rem;
  background-color: lightblue;
  border: 1px solid #000
  }

  .container {

  flex-direction: row;

  flex-wrap: nowrap;

  或者

  flex-flow: row nowrap;

  }

  • 效果
    

———————————————————-

• 多行容器允许换行
  演示代码:
  .container {

  flex-flow: row wrap

  }
• 效果
  
• 多行容器允许或不允许换列

  flex-flow: column nowrap

  flex-flow: column wrap

• 效果
  

• 手机端常用

  flex-flow: column nowrap

  • 效果
    

2. justify-content 主轴上对齐

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

二端对齐 justify-content: space-between;

分散对齐 justify-content: space-around;

平均对齐 justify-content: space-evenly;

3. align-items 交叉轴对齐

    align-items: stretch;
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;

效果

4. align-content 在多行容器对齐

flex-flow: row wrap;

将交叉轴上所有项目看成一个整体
align-content: flex-start;
align-content: flex-end;
align-content: center;

• 效果