flex布局

一.Flex布局
定义：用来为盒装模型提供最大的灵活性。
弹性布局：.box{ display:flex;}
webkit内核的浏览器：.box{ display: -webkit-flex; display:flex;}
二.基本概念

图片.png
三.容器的属性
1. flex-direction(决定主轴的方向）

• 主轴为水平方向，起点在左端

  
  图片.png
  图片.png

• 主轴为水平方向，起点在右端

  
  图片.png
  图片.png

• 主轴为垂直方向，起点在上沿

  
  图片.png
  图片.png

• 主轴为垂直方向，起点在下沿

  
  图片.png
  图片.png

2. flex-wrap(一条轴线拍不下进行换行）

图片.png

• 不换行

  
  图片.png
  图片.png

• 第一行在上面

  
  图片.png
  图片.png

• 第一行在下面

  
  图片.png
  图片.png

3. flew-flow（flex-direction属性和flex-wrap属性的简写形式）
4. justify-content（项目在主轴上的对齐方式）

• 左对齐

  
  图片.png
  图片.png

• 右对齐

  
  图片.png
  图片.png

• 中间

  
  图片.png
  图片.png

• 两端对齐

  
  图片.png
  图片.png

5. align-items(交叉轴上如何对齐）
6. align-content（多根轴线的对齐方式）

https://www.cnblogs.com/dreamperson/p/9367008.html