Flex弹性盒布局-flex-direction、flex-wrap、justify-content、align-items

Flex弹性盒布局

flex弹性布局：之前我们学过浮动和定位设置px值才能进行页面排版，flex会比较方便。它比较弹性。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

举例子如下：

<style>
        *{
            margin: 0px;padding: 0px;
        }
        .box{
            border: 2px solid lightcoral;
/* 给父级添加flex 改成弹性盒模型☆*/
            display: flex;
/* flex-direction决定主轴的方向（即项目的排列方向） */

/* flex-direction: row设置相对于浏览器网页来看，子盒子以水平方向从左到右排列 默认*/
                        flex-direction: row; 
/* flex-direction: row-reverse设置相对于浏览器网页来看，