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

資訊專(zhuān)欄INFORMATION COLUMN

Flex布局詳解

IT那活兒 / 1413人閱讀
Flex布局詳解

點(diǎn)擊上方“IT那活兒”公眾號(hào)，關(guān)注后了解更多內(nèi)容，不管IT什么活兒，干就完了！！！



Flex布局是什么？


Flex是Flexible Box的縮寫(xiě)，意為”彈性布局”，用來(lái)為盒狀模型提供最大的靈活性。
1. 任何一個(gè)容器都可以指定為Flex布局
.demo{
     display: flex;
}
2. 行內(nèi)元素也可以使用Flex布局
.demo{
     display: inline-flex;
}
3. Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴
.demo{
     display: -webkit-flex;
     display: flex;
}


注：設(shè)為Flex布局后,子元素的float、clear和vertical-align屬性將失效。

4. 常見(jiàn)術(shù)語(yǔ)
4.1 容器和項(xiàng)目(container / item)；
4.2 主軸與交叉軸(main-axis / cross-axis)；
4.3 起始線(main/cross-start)與結(jié)束線（main/cross-end)。


容器 container 的屬性


1. flex-direction 主軸方向
1.1 row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
1.2 row-reverse：主軸為水平方向，起點(diǎn)在右端。
1.3 column：主軸為垂直方向，起點(diǎn)在上沿。
1.4 column-reverse：主軸為垂直方向，起點(diǎn)在下沿。
2. flex-wrap主軸一行滿(mǎn)了換行
2.1 nowrap (默認(rèn)值) 不換行壓縮寬度。
2.2 wrap 換行。
2.3 wrap-reverses 反向換行。
3. flex-flow 1和2的組合
flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為 row nowrap。
.demo {
      flex-flow:  ; // flex-flow:row nowrap;
}
4. justify-content主軸元素對(duì)齊方式
4.1 flex-start (默認(rèn))靠著main-start對(duì)齊//參考常見(jiàn)術(shù)語(yǔ)(一般是左方向)。
4.2 flex-end 靠著main-end對(duì)齊//參考常見(jiàn)術(shù)語(yǔ)(一般是右方向)。
4.3 center 靠著主軸居中對(duì)齊//一般就是居中對(duì)齊。
4.4 space-between 兩端對(duì)齊，靠著容器壁，剩余空間平分。
4.5 space-around 分散對(duì)齊，不靠著容器壁，剩余空間在每個(gè)項(xiàng)目二側(cè)平均分配。
4.6 space-evenly 平均對(duì)齊，不靠著容器壁，剩余空間平分。
5. align-items交叉軸元素對(duì)齊方式//單行
5.1 flex-start：交叉軸的起點(diǎn)對(duì)齊。
5.2 flex-end：交叉軸的終點(diǎn)對(duì)齊。
5.3 center：交叉軸的中點(diǎn)對(duì)齊。
5.4 baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
5.5 stretch（默認(rèn)值）伸展：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度。
6. align-content 交叉軸行對(duì)齊方式多行（和 justify-content 屬性一樣）


項(xiàng)目的屬性


1. flex-grow 長(zhǎng)大
flex-grow：項(xiàng)目的放大比例，默認(rèn)為 0，即如果存在剩余空間，也不放大。
2. flex-shrinik 縮小
flex-shrink：項(xiàng)目的縮小比例，默認(rèn)為 1，即如果空間不足，該項(xiàng)目將縮小。
3. align-self覆蓋
align-self：允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋 align-items 屬性。默認(rèn)值為 auto，表示繼承父元素的 align-items 屬性，如果沒(méi)有父元素，則等同于stretch。
4. order 排序
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
5. flex-basis 有效寬度
flex-basis ：在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。


END



本文作者：池思敏

本文來(lái)源：IT那活兒（上海新炬王翦團(tuán)隊(duì)）

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

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

相關(guān)文章

  • 彈性布局（display:flex;）屬性詳解

    摘要：設(shè)為布局以后，子元素的和屬性將失效。二基本概念采用布局的元素，稱(chēng)為容器，簡(jiǎn)稱(chēng)容器。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為項(xiàng)目，簡(jiǎn)稱(chēng)項(xiàng)目。如果項(xiàng)目只有一根軸線，該屬性不起作用。四項(xiàng)目的屬性注項(xiàng)目屬性的全面理解較為復(fù)雜，可以參考文章 一、Flex布局-前言 Flex是Flexible Box的縮寫(xiě)，意為彈性布局，用來(lái)為盒狀模型提供最大的靈活性,旨在提供一個(gè)更有效地布局、對(duì)齊方式，并且能夠使容...

    wangshijun 評(píng)論0 收藏0

  • CSS實(shí)例詳解：Flex布局

    摘要：本文由云社區(qū)發(fā)表本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下布局是如何解決布局問(wèn)題。通過(guò)對(duì)比其他的實(shí)現(xiàn)方式，可以看出使用布局可以?xún)?yōu)雅地實(shí)現(xiàn)相同的布局問(wèn)題。 本文由云+社區(qū)發(fā)表 本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下Flex布局是如何解決CSS布局問(wèn)題。 一．垂直居中 這里同時(shí)用非flex布局和flex布局兩種方式來(lái)實(shí)現(xiàn)，可以對(duì)比兩種實(shí)現(xiàn)方式...

    RobinQu 評(píng)論0 收藏0

  • CSS實(shí)例詳解：Flex布局

    摘要：本文由云社區(qū)發(fā)表本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下布局是如何解決布局問(wèn)題。通過(guò)對(duì)比其他的實(shí)現(xiàn)方式，可以看出使用布局可以?xún)?yōu)雅地實(shí)現(xiàn)相同的布局問(wèn)題。 本文由云+社區(qū)發(fā)表 本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下Flex布局是如何解決CSS布局問(wèn)題。 一．垂直居中 這里同時(shí)用非flex布局和flex布局兩種方式來(lái)實(shí)現(xiàn)，可...

    Meathill 評(píng)論0 收藏0

  • CSS實(shí)例詳解：Flex布局

    摘要：本文由云社區(qū)發(fā)表本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下布局是如何解決布局問(wèn)題。通過(guò)對(duì)比其他的實(shí)現(xiàn)方式，可以看出使用布局可以?xún)?yōu)雅地實(shí)現(xiàn)相同的布局問(wèn)題。 本文由云+社區(qū)發(fā)表 本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下Flex布局是如何解決CSS布局問(wèn)題。 一．垂直居中 這里同時(shí)用非flex布局和flex布局兩種方式來(lái)實(shí)現(xiàn)，可以對(duì)比兩種實(shí)現(xiàn)方式...

    Magicer 評(píng)論0 收藏0

  • flex基礎(chǔ)布局詳解

    摘要：系統(tǒng)性的介紹關(guān)于布局，也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁(yè)面所具有的元素可分為類(lèi)。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局，也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

    nemo 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<