flex布局實現elment容器布局

一。flex布局是什么

flex布局，意為"彈性布局"，是一種響應式的布局方法

采用 Flex 布局的元素，稱為 Flex 容器，它的所有子元素自動成為容器成員。

先放上一個element 的組件實現demo用了一些flex布局  ，然后下邊有關於flex的詳細屬性

先放效果圖

 

 

 

貼上代碼

<div class="box flex">
        <div class="head flex">
            <ul class="flex flexUl">
                <li>導航</li>
                <li>導航</li>
                <li>導航</li>
                <li>導航</li>
                <li>導航</li>
            </ul>
            <button class="btn">登陸</button>
        </div>
        <div class="content flex">
            <div class="aside align-content">aside</div>
            <div class="right flex">
                <div class="main align-content">main</div>
                <div class="foot align-content">foot</div>
            </div>
        </div>
    </div>
    <style>
        .flex {
            display: flex;
        }

        /*  flex-direction是子元素的主軸方向  默認是row  是橫向的下邊有圖  */
        .box {
            flex-direction: column;
        }

        /*  justify-content是主軸的對齊方式 值有flex-start | flex-end | center | space-between | space-around;
        這里用的space-around  控制了登陸按鈕和導航的位置  其他屬性下邊有圖*/
        /*  align-items 是交叉軸的對齊方式   如果定義了direction的話  主軸和交叉軸是會變的*/
        .head {
            background: #b3c0d1;
            height: 50px;
            width: 100%;
            justify-content: space-around;
            align-items: center;
        }

        .flexUl {
            flex-wrap: nowrap;
            width: 40%;
            justify-content: space-between;
            list-style: none;
        }

        .flexUl li {
            width: 20%;
        }

        .btn {
            background-color: #d3dce6;
            border-radius: 5px;
            height: 80%;
        }

        .content {
            width: 100%;
        }

        .aside {
            background: #d3dce6;
            width: 20%;
            height: 500px;
        }

        /* 比如這里flex-direction:column;
    右側的元素就是從上往下的排列 */
        .right {
            flex-direction: column;
            width: 80%;
        }

        .main {
            background: #e9eef3;
            width: 100%;
            height: 400px;
        }

        .foot {
            background: #b3c0d1;
            height: 100px;
            width: 100%;
        }

        /*align-content這個命名也是一個屬性 他定義了多跟軸線的對齊方式 
    如果你有很多排元素的話  你可以  align-content:center;起到垂直居中的效果
     但是只有一根軸線的話這個屬性是不起作用的那我們在下邊分別定義主軸和交叉軸center
     就可以實現一排元素的垂直居中   其他對齊方式下邊有圖 */
        .align-content {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

 

然后說一下flex的優缺點

浮動的布局，浮動布局的時候  首先需要清除浮動 不然會影響下邊的元素 而flex不用清楚浮動

另外浮動的時候固定寬的元素，瀏覽器寬度變的過窄時，被擠到下面，flex里邊就有一個放大縮小的屬性可以防止被擠到下邊

但是flex存在一些兼容問題

 

下邊是關於flex的一些屬性，有說的不足的地方請大家批評指正，一定及時更改

 

設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。 

.box{
  display: flex;
}
//行內元素
.box{
  display: inline-flex;
}

 

 

容器默認存在兩根主軸：水平方向主軸(main axis)和垂直方向交叉軸(cross axis)，默認項目按主軸排列。

• main start/main end：主軸開始位置/結束位置；
• cross start/cross end：交叉軸開始位置/結束位置；
• main size/cross size：單個項目占據主軸/交叉軸的空間；

 

二。容器的屬性

• flex-direction  
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction屬性決定主軸的方向（即項目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row（默認值）：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。
• column：主軸為垂直方向，起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。

 

 

flex-wrap屬性決定元素換不換行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}


nowrap（默認）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。

　flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

.box { flex-flow: <flex-direction> <flex-wrap>; }

nowrap（默認）

 

wrap

wrap-reverse

 

 

justify-content屬性定義了項目在主軸上的對齊方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

 

align-items屬性定義項目在交叉軸上如何對齊。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

 

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。