彈性盒模型flex

Gemini 發布于2019-04-23 11:53 / 2483人閱讀

摘要：一是的縮寫，意為彈性布局定義彈性布局二基本定義我只簡單的說一下容器和項目，因為只關系容器和項目來講的個人理解。它可以設為或屬性一樣的值，則該項目占據固定的空間。默認值為，表示繼承夫元素的屬性，如果沒有夫元素，則等同于。

一、flex

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

定義彈性布局

display:flex;

box{
       display:flex;
}

二、基本定義

我只簡單的說一下容器和項目，因為只關系容器和項目來講的（個人理解）。

三、容器的屬性

有6個屬性

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

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

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

值：

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

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

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

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

2. flex-wrap如何換行

值：

nowrap（默認值）：不換行。

wrap：換行，第一行在上面

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

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

4. justify-content定義水平方向對齊方式

值：

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

flex-end：右對齊。

center：水平居中

space-between：兩端對齊，項目之間間隔相等。

space-around：每個項目兩側的間隔相等。

5. align-items垂直對齊方式

flex-start：y軸的起點對齊。

flex-end：y軸的終點對齊。

center：垂直居中

baseline：項目的第一行文字的基線對齊。

stretch（默認值）：如果項目沒有設置高度或者為auto，將占滿整個容器。

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

四、項目屬性

一下6個項目屬性設置在項目上。

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

1. order屬性定義項目的排列順序。數值越小，排列越考前，默認值為0。

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

3. flex-shrink定義項目的縮小比例，默認為1，如過空間不足，項目將縮小。

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

5. flex是上面2、3、4項的簡寫方式，默認值為0 1 auto。

6. align-self屬性允許單個項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為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云服務器云服務器盒模型盒模型html嗎簡述html盒模型 flex

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1316.html

彈性盒子模型詳解

摘要：二彈性盒模型歷史彈性盒模型歷史英文原版或者查看中文翻譯版另外附上標準文檔彈性盒模型在過去幾年間制定了三版草案規范。給子元素直接添加屬性即可七后話以上是本文所有內容，以下是小白我的感慨。一、前言由于W3C在制定彈性盒模型內容有多版草案，在網上瀏覽了很多視頻和文章，版本有新有舊，所以準備寫一篇關于彈性盒模型的文章，一是輔助自己學習，二是幫忙其他前端學習者更容易地彈性盒模型。二、彈性盒...

rozbo 2019-08-28 18:27 評論0 收藏0
彈性盒模型，flex布局

摘要：彈性盒模型彈性盒子是的一種新布局模式，由容器父元素和項目子元素組成。彈性盒子是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。彈性盒模型 ??彈性盒子是css3的一種新布局模式，由容器（父元素）和項目（子元素）組成。 ? 彈性盒子是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。 ? 引入彈性盒模型的目的：提供一種更加有效的方式...

CoderDock 2019-04-23 11:54 評論0 收藏0
彈性盒模型

摘要：彈性盒模型相比傳統的盒模型，可以更加簡單的實現各種布局頁面簡單舉一個例子，代碼如下加上廠商前綴，目前使用方式都有三種寫法，舊的，過度的，新的的屬性假如的改成也能實現數字的垂直居中彈性盒模型相比傳統的盒模型（display+position+float），可以更加簡單的實現各種布局頁面簡單舉一個例子，代碼如下 1 2 3 css .row{width:200px;...

BakerJ 2019-08-30 12:52 評論0 收藏0
CSS中各種布局的背后(*FC)

摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 評論0 收藏0
彈性盒模型

摘要：如果一個項目的屬性為，其他項目都為，則空間不足時，前者不縮小。彈性盒模型 1. 容器的概念指定父元素為 flex .parent { display: flex; } .parent_inline { display: inline-flex; } 指定之后 float clear vertical-align 會失效父元素稱為 flex container 子元素稱為 fle...

WelliJhon 2019-08-30 10:57 評論0 收藏0