目录

1. flex布局介绍
2. flex基本概念与用法
3. flex容器的属性值

1. flex布局介绍

传统的布局方案，是基于盒子模型(border+padding+content),依赖于display属性+position属性+float属性，它对于特殊布局非常不方便，例如盒子的垂直居中。
Flexbox是flexible box的简称（灵活的盒子），是css3中新的布局模式，它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：
* 在不同方向排列元素
* 重新排列元素的显示顺序
* 更改元素的对齐方式
* 动态地将元素装入容器

2. flex基本概念与用法

采用flex布局的元素，成为flex容器，简称"容器"。它的所有子元素自动生成容器的成员，成为Flex项目(flex item)，简称"项目"。

3. flex容器的属性

3.1 flex-direction属性

• flex-direction属性可以取4个值

3.2 flex-wrap属性

• nowrap(默认)：不换行

• wrap:换行，第一行在上方

• wrap-reverse:换行，第一行在下方

• flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box{
   display:flex;
   flex-flow: row nowrap;
}

• justify-content属性

• align-items属性

align-items属性定义项目在交叉轴上如何对齐。控制单行单列的情况

• align-content属性

align-content是用来控制多行多列的情况

4. flex项目的属性

以下这5个属性是作用在flex项目上的

• order属性

order属性固定了弹性容器中可伸缩项目在布局时的顺序。元素按照order属性的值来进行布局。order的默认值为0

• align-self属性

align-self会对当前flex行中的flex元素，并覆盖align-items的值。

可选参数

• flex-start
  flex元素会对齐到首端
• flex-end
  flex元素会对齐到尾端
• center
  flex元素会居中对齐

• flex属性

flex会让所有的弹性盒模型对象的子元素都有相同的宽度。

可选参数:
number