伸缩布局1（flex-direction、justify-con

使用float方式让对象水平展示时，有时我们还要考虑到清除浮动的问题
这时直接使用flex，就可以达到float的效果，还不需要清除浮动。

            /*ul设置flex属性*/
            ul{
                width: 500px;
                border: 1px solid #000;
                margin: 100px;
                /*在这*/
                display: flex;
            }

            /*设置li的宽高*/
            ul>li{
                width: 100px;
                height: 100px;
            }

            /*设置每个li的背景颜色*/
            ul>li:nth-child(1){
                background-color: red;
            }
            ul>li:nth-child(2){
                background-color: blue;
            }
            ul>li:nth-child(3){
                background-color: green;
            }
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

在深入了解伸缩布局前，我们还需要了解一些前置知识
伸缩容器：设置了flex属性的结构， 如ul
伸缩项：伸缩容器里的子集， 如li
主轴：默认从伸缩容器的左侧到右侧的水平线
主轴的起点：如图
主轴的终点：如图
侧轴：主轴的垂直线
侧轴的起点：如图
侧轴的终点：如图

image.png

一、主轴方向 flex-direction

在伸缩布局中，默认情况下水平方向是主轴，主轴的起点在伸缩容器的最左侧，主轴的终点在伸缩容器的最右侧，我们可以通过属性来修改主轴方向
flex-direction：主轴的起点

1.flex-direction: row; 默认值
主轴起点在伸缩容器最左边，终点在伸缩容器最右边，从左至右排版

            ul{
                width: 500px;
                border: 1px solid #000;
                margin: 100px;
                /*在这*/
                display: flex;
                flex-direction: row;
            }

image.png

2.flex-direction: row-reverse;
起点在伸缩容器最右边，终点在伸缩容器最左边，从右至左排版

image.png

3.flex-direction: column;
起点在伸缩容器最上边，终点在伸缩容器最下边，从上至下排版

image.png

4.flex-direction: column-reverse;
起点在伸缩容器最下边，终点在伸缩容器最上边，从下至上排版

image.png

注意：侧轴是主轴的垂直方向，主轴改变，侧轴也相应发生改变

二、伸缩项根据主轴的对齐方式 justify-content

image.png

1.justify-content: flex-start;默认值
首先根据主轴的方向排序好伸缩项，再将排序好的伸缩项和主轴的起点对齐
伸缩项默认和主轴的起点对齐

            ul{
                width: 500px;
                border: 1px solid #000;
                margin: 100px;
                display: flex;
                flex-direction: row; 主轴起点的默认值
                /*在这*/
                justify-content: flex-start; 伸缩项对齐的默认值
            }

image.png

2.justify-content: flex-end;
首先根据主轴的方向排序好伸缩项，再将排序好的伸缩项和主轴的终点对齐

            ul{
                width: 500px;
                border: 1px solid #000;
                margin: 100px;
                display: flex;
                flex-direction: row; 主轴起点的默认值
                /*在这*/
                justify-content: flex-end; 主轴上伸缩项对齐的默认值
            }

image.png

3.justify-content: center;
首先根据主轴的方向排序好伸缩项，再将排序好的伸缩项和主轴的中点对齐

            ul{
                width: 500px;
                border: 1px solid #000;
                margin: 100px;
                display: flex;
                flex-direction: row; 主轴起点的默认值
                /*在这*/
                justify-content: flex-center; 主轴上伸缩项对齐的默认值
            }

image.png

4.justify-content: space-between;

            ul{
                width: 500px;
                border: 1px solid #000;
                margin: 100px;
                display: flex;
                flex-direction: row; 主轴起点的默认值
                /*在这*/
                justify-content:space-between; 
            }

image.png

space-between的对齐过程：
首先，根据主轴的方向排序好伸缩项

image.png

然后，计算 伸缩容器多余的空间space / （伸缩项数目-1）

image.png
最后，将计算好的容器分配到伸缩项之间between
image.png

5.justify-content: space-around;

            ul{
                width: 500px;
                border: 1px solid #000;
                margin: 100px;
                display: flex;
                flex-direction: row; 主轴起点的默认值
                /*在这*/
                justify-content:space-around; 主轴上伸缩项对齐的默认值
            }

image.png

space-around的对齐过程：
首先，根据主轴的方向排序好伸缩项

image.png

然后，计算 伸缩容器多余的空间space / （伸缩项数目 * 2）

image.png
最后，将计算好的容器分配到伸缩项两侧around
image.png

三、伸缩项根据侧轴的对齐方式 align-items

侧轴和主轴相互垂直
和主轴对齐方式相比，侧轴对齐方式也有flex-start center flex-end

1.align-items: flex-start;
根据主轴方向排序好伸缩项，再将伸缩项基于侧轴的起点对齐

            ul{
                width: 500px;
                height: 350px;
                border: 1px solid #000;
                margin: 100px;
                display: flex;
                /*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
                flex-direction: row;
                /*告诉浏览器排版好的伸缩项需要和侧轴的起点对齐*/
                align-items: flex-start;
            }

image.png

2.align-items: flex-end;
根据主轴方向排序好伸缩项，再将伸缩项和侧轴的终点对齐

            ul{
                width: 500px;
                height: 350px;
                border: 1px solid #000;
                margin: 100px;
                display: flex;
                /*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
                flex-direction: row;
                /*告诉浏览器排版好的伸缩项需要和侧轴的终点对齐*/
                align-items: flex-end;
            }

image.png

3.align-items: center;
根据主轴方向排序好伸缩项，再将伸缩项和侧轴的中点对齐

            ul{
                width: 500px;
                height: 350px;
                border: 1px solid #000;
                margin: 100px;
                display: flex;
                /*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
                flex-direction: row;
                /*告诉浏览器排版好的伸缩项需要和侧轴的中点对齐*/
                align-items: center;
            }

image.png

下面是侧轴对齐和主轴对齐 不同 的地方

4.align-items: baseline;
根据主轴方向排序好伸缩项，让所有伸缩项在一条基线上对齐
vertical-align中提到的基线就是最短一个元素的底线

image.png

            ul{
                width: 500px;
                height: 350px;
                border: 1px solid #000;
                margin: 100px;
                text-align: center;
                
                display: flex;
                /*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
                flex-direction: row;
                /*告诉浏览器排版好的伸缩项要在一条基线上对齐*/
                align-items: baseline;
            }

            ul>li:nth-child(2){
                background-color: blue;
                margin-top:50px ;
            }

给第二个li设置margin-top:50px ;为了让所有伸缩项的基线在一条线上对齐，红li和绿li也向下移

image.png

5.align-items: stretch;拉伸对齐/等高对齐
让所有伸缩项的高度等于侧轴的高度
注意：伸缩项不能设置高度

            ul{
                width: 500px;
                height: 350px;
                border: 1px solid #000;
                margin: 100px;
                text-align: center;             
                display: flex;
                /*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
                flex-direction: row;
                /*告诉浏览器排版好的伸缩项需要和侧轴的起点对齐*/
                align-items: stretch;
            }
            ul>li{
                width: 100px;
                /*height: 100px;*/
                line-height: 100px;
            }

image.png

总结：根据主轴(justify-content)或侧轴(align-items)的对齐方式方法为
1.伸缩项根据主轴方向按默认方式排序好
2.若设置align-items，则根据侧轴给出的起点对起，justify-content原理相同

我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com