关于flex布局

关于flex布局的总结

一、起步 把容器指定为 flex容器

1. 任何一个容器都可以指定为Flex 布局。

.box{
   display:flex;
}

1. 行内元素也可以使用Flex布局。

.box{
   display:inline-flex;
}

需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效

二、然后 容器的所有子元素自动就成了 容器的 item

1. 弄清楚 几个基本的概念 我们知道盒子模型 下面可以理解为 flex 模型
   

容器默认存在两根轴：

* 水平的主轴（main axis）和垂直的交叉轴（cross axis）。
* 主轴的开始位置（与边框 的交叉点）叫做main start，结束位置叫做main end；
* 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
* 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

### 三、容器的属性
以下6个属性设置在容器上:

* flex-wrap
* flex-flow
* justify-content
* align-items
* flex-direction
* align-content

flex-wrap:

• 它可能有四个值

  • row（默认值）：主轴为水平方向，起点在左端
  • row-reverse:主轴为水平方向，起点在右端
  • column:主轴为垂直方向，起点在上沿
  • column-reverse:主轴为垂直方向，起点在下沿

三、item的属性

以下6个属性设置在项目上:

* order
* flex-grow
* flex-shrink
* flex-basis
* flex
* align-self

来源：https://www.cnblogs.com/var-chu/p/11908558.html