flex布局（flex-direction 主軸的方向 justify-content控制主軸上的排列方式）

flex布局

可以用父和子來區分felx

flex container容器 父

flex item項目 子

flex就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式

flex-direction設置主軸的方向

​ row默認值從左到右

​ row-reverse從右到左

​ column從上到下

​ column-reverse從下到上

div {
            display: flex;
            /* 主軸默認是row 行 */
            flex-direction: row;
            /* row翻轉 */
            flex-direction: row-reverse;
            /* 也可以設定為主軸是column 列 */
            flex-direction: column;
            /* 主軸column列翻轉 */
            flex-direction: column-reverse;
            width: 800px;
            height: 300px;
            background-color: pink;
        }
 div span {
            width: 150px;
            height: 150px;
            background-color: purple;
        }

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

justify-content控制設置父主軸上的子元素排列方式

​ flex-start默認值 從頭部開始 如果主軸是X軸，則從左到右

​ flex-end從尾部開始排列

​ center在主軸居中對齊

​ space-around平均分剩余空間

​ space-between先兩邊貼邊在平分剩余空間

div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默認行 */
            flex-direction: row;
            /* 以x軸開始從左對齊 */
            justify-content: flex-start;
            /* 以x軸開始最后盒子以右對齊 */
            justify-content: flex-end;
            /* 以中間對齊 */
            justify-content: center;
            /* 平均分配了空間 */
            justify-content: space-around;
            /* 左右兩側 */
            justify-content: space-between; 
        }
        div span {
            width: 150px;
            height: 150px;
            background-color: purple;
        }

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>

flex-wrap設置子元素是否換行

alingn-content設置側軸上的子元素的排列方式（多行）

align-items設置側軸上的子元素排列方式（單行）

flex-flow復合屬性，相當於同時設置了flex-direction和flex-wrap

flex-direction練習