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设置相对于浏览器网页来看，子盒子以水平方向从右到左排列 */
                        flex-direction: row-reverse; 

/* flex-direction: column设置相对于浏览器网页来看，子盒子以垂直方向从上到下排列 */
                        flex-direction: column;
/* flex-direction: column-reverse;设置相对于浏览器网页来看，子盒子以垂直方向从下到上排列 */
                        flex-direction: column-reverse;

注意：都是子盒子排序，和子盒子里面内容无关

/*flex-wrap定义如果在一条轴线排不下，如何换行*/
/*默认情况下,项目都排在一条线(又称"轴线")上。如果设置父级div固定宽但是div盒子里的东西不够放，会把盒子里的大小平均缩小 不会换行*/
 width: 600px;
/* flex-wrap: wrap属性定义了如果—条轴线(设置固定宽)排不下就换行,且第一行在上方 */
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse属性定义了如果—条轴线(设置固定宽)排不下就换行,且第一行在下方 */
/* flex-wrap: wrap-reverse; */
/* flex-wrap: nowrap属性定义了如果—条轴线(设置固定宽)排不下也不换行 把盒子里的宽度平均缩小*/
/* flex-wrap: nowrap; */

/* 复合属性 */
 height: 500px;

/* 这个的意思是子盒子不仅相对于浏览器y轴从上沿下排列，而且换列 */
flex-flow:column wrap; 

/* justify-content定义项目在主轴上的对齐方式 */
/* justify-content:flex-start 水平方向从左到右排列 ，子盒子总体居左 */
/* justify-content: flex-start; */
/* justify-content:flex-end 水平方向从左到右排列 ，子盒子总体居右 */
/* justify-content: flex-end; */
/* justify-content:center水平方向从左到右排列 ，子盒子总体居中 */
justify-content: center;

/* 子盒子两端对齐,中间子盒子根据div盒子宽给项目之间的间隔都相等,即使设置margin也不影响*/
/* justify-content: space-between; */
/* space-around:每个项目两侧的盒子距离浏览器两侧间隔相等。所以，子盒子之间的间隔比两端子盒子到览器两侧间隔的间隔大一倍，且不受margin的干扰会把margin/padding的大小计算在内*/
/* padding-left: 30px;
justify-content: space-around; */
/* 子盒子之间左右的间距以及两侧子盒子和浏览器两侧之间的间距都相等
★会受到子元素item设置margin的影响 item距离两侧的距离相等item项目之间的距离相等但是 item距离两侧的距离和item项目之间的距高不相等*/
/* justify-content: space-evenly; */

align-items: flex-start; /*所有子盒子距斜对轴开始star*/

align-items: flex-end; /*所有子盒子距斜对轴结束处end*/

align-items: center;/*所有子盒子距斜对轴居中*/

/*baseline :项目的第一行文字的基线对齐,需要给子盒子第一行的文字设置行高*/

align-items: baseline;

/* align-items: stretch; 给子盒子设置高为auto，效果会改变子盒子高度（和盒子一样高）*/

/* align-items: stretch; */

        }
        .item{
            width: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 30px;
            background-color: burlywood;
            margin: 20px;
        }
    </style>
<div class="box">

<!-- <div class="item" style="line-height: 200px;">1</div>用于align-items: baseline-->
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>