flex布局的常見屬性

父項屬性

flex-direction

flex-direction 設定誰為主軸，剩下的就是側軸。而我們的子元素是跟着主軸來排列的。

flex-direction 的取值：

舉例說明：

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

①父元素不設定flex-direction時，預設水準方向為主軸，元素從左向右排列

div {
   width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
           

②父元素設定flex-direction時

div {
   width: 500px;
    height: 400px;
    background-color: pink;
    display: flex;
    flex-direction: column;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
           

justify-content（主軸上子元素的排列）

使用①：

div {/* 父元素 */
   width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: flex-start;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
           

使用②：

div {
   /* 父元素 */
    width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: flex-end;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
           

使用③：

div {
   /* 父元素 */
    width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: center;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
           

使用④：

div {
   /* 父元素 */
    width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: space-around;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
           

使用⑤：

div {
   /* 父元素 */
    width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: space-between;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
           

flex-wrap

div {
   /* 父元素 */
    width: 400px;
    height: 300px;
    background-color: pink;
    display: flex;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 5px solid red;
}
           

預設子元素不換行，如果裝不開，則縮小子元素寬度。

若要換行，則設定父元素：flex-wrap: wrap;

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

div {
        /* 父元素 */
        width: 400px;
        height: 300px;
        background-color: pink;
        display: flex;
        align-items: center;
    }
    
    span {
        height: 100px;
        width: 100px;
        background-color: skyblue;
        border: 5px solid red;
    }
           

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

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

div {
   /* 父元素 */
    width: 400px;
    height: 300px;
    background-color: pink;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 5px solid red;
}
           

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

若給div設定：align-content: space-between;效果為：

若給div設定：align-content: space-around;效果為：

子項屬性

flex 屬性

定義子項目配置設定剩餘空間，用çex來表示占多少份數。

div {
   /* 父元素 */
    width: 400px;
    height: 300px;
    background-color: pink;
    display: flex;
}

span {
    height: 100px;
    flex: 1;
    background-color: skyblue;
    border: 5px solid red;
}
           

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