成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Flex布局詳解

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

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



Flex布局是什么？


Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
1. 任何一個容器都可以指定為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. 常見術(shù)語
4.1 容器和項目(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)值）：主軸為水平方向，起點在左端。
1.2 row-reverse：主軸為水平方向，起點在右端。
1.3 column：主軸為垂直方向，起點在上沿。
1.4 column-reverse：主軸為垂直方向，起點在下沿。
2. flex-wrap主軸一行滿了換行
2.1 nowrap (默認(rèn)值) 不換行壓縮寬度。
2.2 wrap 換行。
2.3 wrap-reverses 反向換行。
3. flex-flow 1和2的組合
flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認(rèn)值為 row nowrap。
.demo {
      flex-flow:  ; // flex-flow:row nowrap;
}
4. justify-content主軸元素對齊方式
4.1 flex-start (默認(rèn))靠著main-start對齊//參考常見術(shù)語(一般是左方向)。
4.2 flex-end 靠著main-end對齊//參考常見術(shù)語(一般是右方向)。
4.3 center 靠著主軸居中對齊//一般就是居中對齊。
4.4 space-between 兩端對齊，靠著容器壁，剩余空間平分。
4.5 space-around 分散對齊，不靠著容器壁，剩余空間在每個項目二側(cè)平均分配。
4.6 space-evenly 平均對齊，不靠著容器壁，剩余空間平分。
5. align-items交叉軸元素對齊方式//單行
5.1 flex-start：交叉軸的起點對齊。
5.2 flex-end：交叉軸的終點對齊。
5.3 center：交叉軸的中點對齊。
5.4 baseline: 項目的第一行文字的基線對齊。
5.5 stretch（默認(rèn)值）伸展：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
6. align-content 交叉軸行對齊方式多行（和 justify-content 屬性一樣）


項目的屬性


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


END



本文作者：池思敏

本文來源：IT那活兒（上海新炬王翦團隊）

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

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

相關(guān)文章

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

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

    wangshijun 評論0 收藏0

  • CSS實例詳解：Flex布局

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

    RobinQu 評論0 收藏0

  • CSS實例詳解：Flex布局

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

    Meathill 評論0 收藏0

  • CSS實例詳解：Flex布局

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

    Magicer 評論0 收藏0

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

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

    nemo 評論0 收藏0

發(fā)表評論

0條評論

IT那活兒

男|高級講師

TA的文章

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