目錄

                    彈性布局學習-介紹(一)      

                    彈性布局學習-詳解 flex-direction【決定主軸的方向】(二) 

                    彈性布局學習-詳解 justify-content(三) 

                    彈性布局學習-詳解 align-items(四) 

                    彈性布局學習-詳解flex-wrap(五)             

 

 

justify-content

           

             主軸方向對齊，可以調整元素在主軸方向上的對齊方式，包括flex-start、flex-end、center、space-around、space-between幾種方式

 

flex-start

  

section ul {
            display: flex;
            justify-content: flex-start;
        }

        section li {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            margin: 10px;
            background-color: pink;
            list-style:none;
        }

 

 

flex-end

 

section ul {
            display: flex;
            justify-content: flex-end;
        }

        section li {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            margin: 10px;
            background-color: pink;
            list-style:none;
        }

 

 

center

 

section ul {
            display: flex;
            justify-content: center;
        }

        section li {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            margin: 10px;
            background-color: pink;
            list-style:none;
        }

 

 

space-around

 

section ul {
            display: flex;
            justify-content: space-around;
        }

        section li {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            margin: 10px;
            background-color: pink;
            list-style:none;
        }

 

 

space-between

 

section ul {
            display: flex;
            justify-content: space-between;
        }

        section li {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            margin: 10px;
            background-color: pink;
            list-style:none;
        }