彈性盒模型flex

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

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

一、flex

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

定義彈性布局

display:flex;

box{
       display:flex;
}

二、基本定義

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

三、容器的屬性

有6個(gè)屬性

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

一下對(duì)6個(gè)容器屬性的簡(jiǎn)單介紹

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

值：

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

row-reverse：水平方向，從右邊開(kāi)始。

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

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

2. flex-wrap如何換行

值：

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

wrap：換行，第一行在上面

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

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

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

值：

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

flex-end：右對(duì)齊。

center：水平居中

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

space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。

5. align-items垂直對(duì)齊方式

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

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

center：垂直居中

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

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

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

四、項(xiàng)目屬性

一下6個(gè)項(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則平均分，有個(gè)值為2其他值為1則占據(jù)剩余空間比1多一倍。

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

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

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

6. align-self屬性允許單個(gè)項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承夫元素的align-items屬性，如果沒(méi)有夫元素，則等同于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嗎簡(jiǎn)述html盒模型 flex

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1316.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Gemini

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

閱讀 2310·2019-08-26 12:16
為什么都說(shuō)js 里面任何對(duì)象最終都繼承了Object對(duì)象

閱讀 556·2019-08-26 10:29
每日Scrum中的3個(gè)重要問(wèn)題是什么？

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

資訊專欄INFORMATION COLUMN

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

彈性盒模型flex

一、flex

定義彈性布局

二、基本定義

三、 容器的屬性

一下對(duì)6個(gè)容器屬性的簡(jiǎn)單介紹

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

2. flex-wrap如何換行

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

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

5. align-items垂直對(duì)齊方式

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

四、項(xiàng)目屬性

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

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

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

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

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

相關(guān)文章