Flex布局

flex布局父项常见属性：

flex-direction: 设置主轴方向，先设置谁为主轴，剩下的就是侧轴（主轴水平X轴，侧轴纵向Y轴）

justify-content: 设置主轴上的子元素排列方式

flex-wrap: 设置子元素是否换行

align-content: 设置侧轴上子元素的排列方式（多行）

align-items: 设置侧轴上的子元素排列方式（单行）

flex-flow: 合属性，相当于同时设置了flex-direction 和 flex-wrap

一 共同的css

div {
            /* 给父级添加flex属性*/
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
}

div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
}

一、flex-direction

flex-direction: row(默认从左到右)------------重点

flex-direction: row-reverse(从右到左)

flex-direction: column(从上到下)-------------重点

flex-direction: column-reverse(从下到上)

演示如下：

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

二、justify-content

flex-start(默认从头部开始，根据主轴)---------------重点

flex-end(从尾部开始排列)

center(在主轴居中对齐)----------------------------------重点

space-around(平分剩余空间)---------------------------重点

space-between(先两边贴边，在平分剩余空间)----重点

演示如下：

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-around;

justify-content: space-between;

三、flex-wrap

nowrap(默认不换行),

wrap(默认换行)-----------重点

演示如下：

flex-wrap: wrap;

flex-wrap: nowrap;

四、align-content(多行)

演示如下：

align-content: flex-start;

#align-content: flex-end;

align-content: center;

align-content: space-around;

align-content: space-between;

align-content: stretch;

五、align-items(单行)

演示如下：

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: stretch

六、flex-flow,相当于同时设置了flex-direction 和 flex-wrap

演示如下：

flex-flow: column wrap;

总结

1.必须给父项添加 display: flex; 属性

2.flex布局中 ，默认子元素不换行，如果放不下就会无限缩小子元素的宽度，放到父元素里面

3.justify-content: flex-end 要和 flex-direction: row-reverse 区分开（注意图解中子盒子的编号顺序）

4.align-content (多行)，不换行默认无效

5.使用 align-items: stretchs 时，子盒子不能给高度