彈性盒模型flex

Gemini 發(fā)布于2019-04-23 11:53 / 2584人閱讀

摘要：一是的縮寫，意為彈性布局定義彈性布局二基本定義我只簡單的說一下容器和項(xiàng)目，因?yàn)橹魂P(guān)系容器和項(xiàng)目來講的個人理解。它可以設(shè)為或?qū)傩砸粯拥闹?，則該項(xiàng)目占據(jù)固定的空間。默認(rèn)值為，表示繼承夫元素的屬性，如果沒有夫元素，則等同于。

一、flex

flex是flexible box的縮寫，意為“彈性布局”；

定義彈性布局

display:flex;

box{
       display:flex;
}

二、基本定義

我只簡單的說一下容器和項(xiàng)目，因?yàn)橹魂P(guān)系容器和項(xiàng)目來講的（個人理解）。

三、容器的屬性

有6個屬性

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

一下對6個容器屬性的簡單介紹

1. flex-direction屬性決定排列方向

值：

row(默認(rèn)值)：水平方向，從右邊開始。

row-reverse：水平方向，從右邊開始。

column：垂直方向，從上到下。

column-reverse：垂直方向，從下往上

2. flex-wrap如何換行

值：

nowrap（默認(rèn)值）：不換行。

wrap：換行，第一行在上面

wrap-reverse：換行。第一行在下方。

3. flex-flow是上面兩個屬性的縮寫，默認(rèn)值為row nowrap。

4. justify-content定義水平方向?qū)R方式

值：

flex-start(默認(rèn)值)：左對齊。

flex-end：右對齊。

center：水平居中

space-between：兩端對齊，項(xiàng)目之間間隔相等。

space-around：每個項(xiàng)目兩側(cè)的間隔相等。

5. align-items垂直對齊方式

flex-start：y軸的起點(diǎn)對齊。

flex-end：y軸的終點(diǎn)對齊。

center：垂直居中

baseline：項(xiàng)目的第一行文字的基線對齊。

stretch（默認(rèn)值）：如果項(xiàng)目沒有設(shè)置高度或者為auto，將占滿整個容器。

6. align-content定義多個軸對齊方式（這里不詳細(xì)講解雖然整個講解都不詳細(xì)）。

四、項(xiàng)目屬性

一下6個項(xiàng)目屬性設(shè)置在項(xiàng)目上。

1. order
2. flex- grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

1. order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越考前，默認(rèn)值為0。

2. flex- grow屬性定義項(xiàng)目的放大比例，默認(rèn)值為0，即不放大。如果項(xiàng)目值都為1則平均分，有個值為2其他值為1則占據(jù)剩余空間比1多一倍。

3. flex-shrink定義項(xiàng)目的縮小比例，默認(rèn)為1，如過空間不足，項(xiàng)目將縮小。

4. flex-basis定義了在分配多余空間之前，項(xiàng)目的主軸空間。它可以設(shè)為width或height屬性一樣的值，則該項(xiàng)目占據(jù)固定的空間。

5. flex是上面2、3、4項(xiàng)的簡寫方式，默認(rèn)值為0 1 auto。

6. align-self屬性允許單個項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承夫元素的align-items屬性，如果沒有夫元素，則等同于stretch。除了auto，其他值和align-items屬性完全一樣。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid black;
        }
        .boxBig{
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1{
            border: 1px solid red;
            width: 100px;
            height: 100px;

        }
    style>
head>
<body>
    <div class="boxBig">
        <div class="box1">div>
        <div class="box1">div>
        <div class="box1">div>
        <div class="box1">div>
    div>
body>

GPU云服務(wù)器云服務(wù)器盒模型盒模型html嗎簡述html盒模型 flex

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1316.html

發(fā)表評論

登陸后可評論

0條評論

Gemini

男|高級講師

我要關(guān)注我要私信

TA的文章

IDEA 和 Eclipse 集成開發(fā)工具配置 Java API 幫助文檔教程

閱讀 2929·2021-09-10 10:50
響應(yīng)下拉式菜單

閱讀 2245·2019-08-29 16:06
獲取元素css值

閱讀 3275·2019-08-29 11:02
接觸的第一個vue項(xiàng)目

閱讀 1170·2019-08-26 14:04
【每日一包0013】to-capital-case,to-constant-case,to-dot-

閱讀 2881·2019-08-26 13:24
從前后端分別學(xué)習(xí)——注冊/登錄流程1

閱讀 2414·2019-08-26 12:16
為什么都說js 里面任何對象最終都繼承了Object對象

閱讀 622·2019-08-26 10:29
每日Scrum中的3個重要問題是什么？

閱讀 3224·2019-08-23 18:33

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

彈性盒模型flex

一、flex

定義彈性布局

二、基本定義

三、 容器的屬性

一下對6個容器屬性的簡單介紹

1. flex-direction屬性決定排列方向

2. flex-wrap如何換行

3. flex-flow是上面兩個屬性的縮寫，默認(rèn)值為row nowrap。

4. justify-content定義水平方向?qū)R方式

5. align-items垂直對齊方式

6. align-content定義多個軸對齊方式（這里不詳細(xì)講解雖然整個講解都不詳細(xì)）。

四、項(xiàng)目屬性

1. order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越考前，默認(rèn)值為0。

2. flex- grow屬性定義項(xiàng)目的放大比例，默認(rèn)值為0，即不放大。如果項(xiàng)目值都為1則平均分，有個值為2其他值為1則占據(jù)剩余空間比1多一倍。

3. flex-shrink定義項(xiàng)目的縮小比例，默認(rèn)為1，如過空間不足，項(xiàng)目將縮小。

4. flex-basis定義了在分配多余空間之前，項(xiàng)目的主軸空間。它可以設(shè)為width或height屬性一樣的值，則該項(xiàng)目占據(jù)固定的空間。

5. flex是上面2、3、4項(xiàng)的簡寫方式，默認(rèn)值為0 1 auto。

6. align-self屬性允許單個項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承夫元素的align-items屬性，如果沒有夫元素，則等同于stretch。除了auto，其他值和align-items屬性完全一樣。

相關(guān)文章