flex布局笔记

flex布局，也叫弹性布局，分为两个部分，一个是语法添加到父容器上的，一个是添加到子容器上的。
一、父容器属性
先说一下添加到父容器上的属性有以下几个：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
先看一下代码的初始状态，进行一些对比：

使用flex布局的，必须要在父盒子添加display:flex;

依次介绍一下这几个属性所对应的属性值

1.flex-direction设定主轴的方向，也就是说布局的排列方向，与之相垂直的方向视为侧轴方向。
flex-direction:row;主轴方向为从左向右的水平方向（默认值）。

flex-direction: row-reverse;主轴方向为从右到左的水平方向。

flex-direction: column;主轴方向为从上到下的垂直方向。

flex-direction: column-reverse;主轴方向为从下到上的垂直方向。

注意：如果没有给子盒子设置高度和宽度，row方向的话，子盒子默认宽度是内容的宽度，高度默认与父盒子相同。column方向的话，子盒子宽度默认与父盒子相同，高度默认是内容的高度。
2.flex-wrap换行
以flex-direction: row;为方向看一下换行的效果

flex-wrap: nowrap;不换行（默认值）。

flex-wrap: wrap;换行，第一行在上面，依次往下排。