国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

再次簡單明了總結flex布局,一看就懂...

mayaohua / 2404人閱讀

摘要:可能值含義如下假設主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據其值伸展以充分占據剩余空間備注設置,不然默認按照比例排滿一行。默認值為,表示當空間不足時,自動縮小,其可能的值為整數,表示不同的縮小比例。

思維導圖

flex 布局

類型

[ ] ?display: flex;(本文章為此為主)

[ ] ?display;inline-flex;

屬性

[ ] 父節點 容器flex-container

[ ] 子節點 flex-item

父節點容器

flex-direction? ? ? ? ? 主軸方向(一般水平方向)

flex-warp? ? ? ? ? ? ? ? ?處理一行排列不足的問題

flex-flow? ? ? ? ? ? ? ? ? 1和2的簡寫(flex-flow: row nowrap)

justify-content? ? ? ? 主軸(水平方向)對齊方式

align-items? ? ? ? ? ? ? 與主軸的交叉軸(豎方向)對齊方式

align-content? ? ? ? ? 多行在交叉軸軸上的對齊方式



子節點項目

order? ? ? ? ?? ??? ??? ??? ??? ?值是整數,默認為0,整數越小,item排列越靠前

flex-grow? ? ? ? ? ? ? ? ? ? ? 是其他item的放大倍數

flex-shrink? ? ? ? ? ? ? ? ? ??但空間不足,按照比例被消化,?需在父節點容器中設置flex-basis寬度

flex-basis? ? ? ? ? ? ? ? ? ? ? 規定item項目的寬度

flex? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?是flex-grow flex-shrink flex-basis的總和

align-self? ? ? ? ? ? ? ? ? ? ? 允許item自己在交叉軸(豎方向)有對齊方式

父節點容器

flex-direction? ? ? ? ? 主軸方向(一般水平方向)

flex-warp? ? ? ? ? ? ? ? ?處理一行排列不足的問題

flex-flow? ? ? ? ? ? ? ? ? 1和2的簡寫(flex-flow: row nowrap)

justify-content??? ? ? 主軸(水平方向)對齊方式

align-items? ? ? ? ? ? ? 與主軸的交叉軸(豎方向)對齊方式

align-content? ? ? ? ??多行在交叉軸軸上的對齊方式

html案例代碼:

1
2
3
4

css案例代碼:

    html,body{
        background: #f7f7f7;
    }
    .flex-container{
        display: flex
        color: #fff;
    }
    .flex-item{
        width: 150px;
    height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .yellow{
        background: yellow;
    }
    .black{
        background: black;
    }

頁面如下:

flex-direction
決定主軸(一般是x軸)的方向,即項目排列的方向,有四個可能的值:row(默認)| row-reverse | column | column-reverse?


row:主軸為水平方向,項目沿主軸從左至右排列

column:主軸為豎直方向,項目沿主軸從上至下排列

row-reverse:主軸水平,項目從右至左排列,與row反向

column-reverse:主軸豎直,項目從下至上排列,與column反向

.flex-container{
    display: flex;
    height: 100px;
    flex-direction: row; /* 1 */
    flex-direction: column; /*  2*/
    flex-direction: row-reverse; /*  3*/
    flex-direction: column-reverse;/* 4*/
    color: #fff;
}
.flex-item{
    flex: 1
}








flex-wrap
默認情況下,item排列在一條線上,即主軸上,flex-wrap決定當排列不下時是否換行以及換行的方式,可能的值nowrap(默認) | wrap | wrap-reverse

nowrap:自動縮小項目,不換行

wrap:換行,且第一行在上方

wrap-reverse:換行,第一行在下面

.flex-container{
    display: flex;
    color: #fff;
    flex-wrap: nowrap; /* 1 */
    flex-wrap: wrap; /* 2 */
    flex-wrap: wrap-reverse; /* 3 */
}
.flex-item{
    width: 150px;
    height: 100px;
}
.red{
    width: 300px;   
}

備注: flex-item寬度定義分別是300px 150px 150px 150px;? 所以按照比例2:1:1:1來分割父節點寬度,實際寬度為 150px 75px 75px 75px (合計375px)







flex-flow
是flex-direction和flex-wrap的簡寫形式,如:row wrap | column wrap-reverse等。默認值為row nowrap,即橫向排列 不換行。
.flex-container{
    flex-flow: row nowrap;
}

組合:

flex-flow nowrap wrap wrap-reverse
row 1、row nowrap 5、row?wrap 9、row?wrap-reverse
column 2、column?nowrap 6、column?wrap 10、column?wrap-reverse
row-reverse 3、row-reverse?nowrap 7、row-reverse?wrap 11、row-reverse?wrap-reverse
column-reverse 4、column-reverse?nowrap 8、column-reverse?wrap 12、column-reverse?wrap-reverse

第一種:當flex-wrap設置為nowrap時,屬性(寬度比例,非px實際寬度)按照flex-direction來排列




第二種:當flex-wrap設置為wrap時,item則按照實際寬度排列,不足則到下行




第三種:當flex-wrap設置為wrap-reverse時,?item則按照實際寬度排列,不足則到上行




justify-content
非常重要,決定item在主軸上的對齊方式,可能的值有flex-start(默認),flex-end,center,space-between,space-around。

當主軸沿水平方向時,具體含義為

flex-start:左對齊

flex-end:右對齊

center:居中對齊

space- between:兩端對齊

space-around:沿軸線均勻分布

備注: 當項目item不滿父節點item-container時,flex-start, flex-end不起到作用

.flex-container{
    justify-content: flex-start; /* 1 */
    justify-content: flex-end; /* 2 */
    justify-content: center; /* 3 */
    justify-content: space-between; /* 4 */
    justify-content: space-around; /* 5 */
}
.flex-item{
    width: 50px;
    height:50px;
}





align-items
決定了item在交叉軸上(Y軸)的對齊方式,可能的值有flex-start | flex-end | center | baseline | stretch

當主軸水平(Y軸)時,其具體含義為:

flex-start:頂端對齊

flex-end:底部對齊

center:豎直方向上居中對齊

baseline:item第一行文字的底部對齊

stretch:當item未設置高度時,item將和容器等高對齊

備注:父節點flex-container與子節點flex-item存在高度差,才能起到作用

.flex-container{
    height: 200px;
    align-items: flex-start; /* 1 */
    align-items: flex-end; /* 2 */
    align-items: center; /* 3 */
    align-items: baseline; /* 4 */
    align-items: stretch; /* 5 */
}
.flex-item{
    height: 100px;
}
.red,.green{
    font-size: 14px;
}




align-content
該屬性定義了當有多根主軸時,即item不止一行時,多行在交叉軸軸上的對齊方式。注意當有多行時,定義了align-content后,align-items屬性將失效。

align-content可能值含義如下(假設主軸為水平方向):

flex-start:左對齊

flex-end:右對齊

center:居中對齊

space- between:兩端對齊

space-around:沿軸線均勻分布

stretch:各行將根據其flex-grow值伸展以充分占據剩余空間

備注:1、設置flex-wrap:wrap,不然默認nowrap按照比例排滿一行。
2、父節點flex-container與子節點flex-item存在高度差,才能起到作用

.flex-container{
    flex-wrap: wrap;
    height:300px;
    background: #969799;
    align-content: flex-start; /* 1 */
    align-content: flex-end; /* 2 */
    align-content: center; /* 3 */
    align-content: space-between; /* 4 */
    align-content: space-between; /* 5 */
    align-content: stretch; /* 6 */
}






子節點項目
item的屬性在item的style中設置。item共有如下六種屬性

order 值是整數,默認為0,整數越小,item排列越靠前

flex-grow 是其他item的放大倍數

flex-shrink 但空間不足,按照比例被消化,需在父節點容器中設置flex-basis寬度

flex-basis 規定item項目的寬度

flex 是flex-grow flex-shrink flex-basis的總和

align-self 允許item自己在交叉軸(豎方向)有對齊方式

order
order的值是整數,默認為0,整數越小,item排列越靠前
.flex-container{
    flex-flow: wrap;
}
.flex-items{
  order:1;
}

flex-grow
定義了當flex容器有多余空間時,item是否放大。默認值為0,即當有多余空間時也不放大;可能的值為整數,表示不同item的放大比例

備注:item項目未規定寬度,則分配一行寬度,即使規定了寬度也分配多余空間

.flex-item{
    flex-grow: 1;
}
/* 1 */
.flex-contanier{
    flex-wrap: wrap;
}
/* 2 */
.flex-contanier{
    flex-wrap: nowrap;
}


flex-shrink
定義了當容器空間不足時,item是否縮小。默認值為1,表示當空間不足時,item自動縮小,其可能的值為整數,表示不同item的縮小比例。

備注:這個比較懵逼,待解析

flex-basis
表示項目在主軸上占據的空間,默認值為auto。
.red{
    flex-basis: 100px;
}
.green {
    flex-basis: 100px;
}

flex
flex屬性是flex-grow、flex-shrink和flex-basis三屬性的簡寫總和

具體查看以上三個

align-self
align-self屬性允許item有自己獨特的在交叉軸上的對齊方式,它有六個可能的值,默認值為auto

auto:和父元素align-self的值一致

flex-start:頂端對齊

flex-end:底部對齊

center:豎直方向上居中對齊

baseline:item第一行文字的底部對齊

stretch:當item未設置高度時,item將和容器等高對齊

備注:與父節點flex-container中的align-item, align-content同個意思,不同的是align設置的是單個的,而align-items設置的

.green{
    align-self: auto;
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    align-self: stretch;
}




備注:align-self: baseline;???align-self: stretch; 與1 2一樣在此不做多介紹,可以參考align-items

原創文章鏈接

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

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

相關文章

  • 再次簡單明了總結flex布局一看就懂...

    摘要:可能值含義如下假設主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據其值伸展以充分占據剩余空間備注設置,不然默認按照比例排滿一行。默認值為,表示當空間不足時,自動縮小,其可能的值為整數,表示不同的縮小比例。 思維導圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

    felix0913 評論0 收藏0
  • 再次簡單明了總結flex布局一看就懂...

    摘要:可能值含義如下假設主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據其值伸展以充分占據剩余空間備注設置,不然默認按照比例排滿一行。默認值為,表示當空間不足時,自動縮小,其可能的值為整數,表示不同的縮小比例。 思維導圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

    huangjinnan 評論0 收藏0
  • 再次簡單明了總結flex布局一看就懂...

    摘要:可能值含義如下假設主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據其值伸展以充分占據剩余空間備注設置,不然默認按照比例排滿一行。默認值為,表示當空間不足時,自動縮小,其可能的值為整數,表示不同的縮小比例。 思維導圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

    CarlBenjamin 評論0 收藏0
  • 再次簡單明了總結flex布局一看就懂...

    摘要:可能值含義如下假設主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據其值伸展以充分占據剩余空間備注設置,不然默認按照比例排滿一行。默認值為,表示當空間不足時,自動縮小,其可能的值為整數,表示不同的縮小比例。 思維導圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

    kel 評論0 收藏0
  • 再次簡單明了總結flex布局一看就懂...

    摘要:可能值含義如下假設主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據其值伸展以充分占據剩余空間備注設置,不然默認按照比例排滿一行。默認值為,表示當空間不足時,自動縮小,其可能的值為整數,表示不同的縮小比例。 思維導圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

    Shimmer 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<