成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS || flex筆記

huhud / 2014人閱讀

摘要：五個(gè)取值與主軸方向有關(guān)默認(rèn)值左對(duì)齊右對(duì)齊居中兩端對(duì)其，間的間隔距離相等每個(gè)兩側(cè)的間隔相等，相當(dāng)于設(shè)置左右值相等。默認(rèn)值為即使存在剩余空間寬度，也不放大。默認(rèn)值為，表示本來的大小。

Flex布局 
Flex是flexible box的簡稱，純粹用來布局的屬性
1 flex和inline-flex 
任何容器都可以知道為Flex布局，塊級(jí)元素使用display: flex; ；行內(nèi)元素使用inline-flex

容器使用Flex布局后，子元素的float、clear和verticle-align屬性將失效

2 基本概念 
采用Flex布局的元素， 稱為flex container容器。容器內(nèi)的子元素自動(dòng)成為flex container的成員，稱為flex-item


flex-item的排列方向是main axis：即flex-direction指定主軸是水平或是垂直

容器默認(rèn)存在水平主軸main axis和垂直的交叉軸cross axis

main axis：flex-item排列的方向是主軸

cross axis：與主軸垂直的是交叉軸

主軸的開始和結(jié)束位置：main start和main end

交叉軸的開始和結(jié)束位置：cross start和cross end

flex-item在主軸與交叉軸占據(jù)的空間：main size和cross size

3 flex container的屬性 
需要在flex container上設(shè)置的屬性有6個(gè)：

flex-direction：row | row-reverse | column | column-reverse。默認(rèn)值為row

row（默認(rèn)值）：主軸是水平方向，flex-item水平排列，main start在左端

row-reverse：主軸是水平方向，flex-item水平排列，main start在右端

column：主軸是垂直方向，flex-item垂直排列，main start在上邊沿

column-reverse：主軸是垂直方向，flex-item垂直排列，main start在下邊沿

flex-wrap：nowrap | wrap | wrap-reverse。默認(rèn)情況下，flex-item都排在一條軸線上；flex-wrap屬性定義如果在一條軸線上排不下，換行的規(guī)則。

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

wrap：換行，第一行排在上方

wrap-reverse：換行，第一行排在下方

flex-flow：是flex-direction和flex-wrap的簡寫，默認(rèn)值為row nowrap

flex-flow: &&

justify-content：定義flex-item在主軸main-axis上的對(duì)齊方式

justify-content: flex-start | flex-end | center | space-between | space-around。五個(gè)取值與主軸方向有關(guān)

flex-start（默認(rèn)值）：左對(duì)齊；flex-end右對(duì)齊；center居中；

space-between：兩端對(duì)其，flex-item間的間隔距離相等

space-around：每個(gè)flex-item兩側(cè)的間隔相等，相當(dāng)于設(shè)置左右margin值相等。

align-items：定義flex-item在交叉軸的對(duì)其方式

align-items: flex-start | flex-end | center | baseline | strecth。五個(gè)取值與交叉軸方向有關(guān)

flex-start交叉軸起點(diǎn)對(duì)其；

baseline：flex-item的第一行文字的基線對(duì)齊

stretch（默認(rèn)值）：如果flex-item沒有設(shè)置高度或者值為auto，將占滿整個(gè)容器高度

align-content：如果容器內(nèi)出現(xiàn)多跟軸線（即出現(xiàn)wrap），定義主軸在交叉軸上的對(duì)齊方式，只有一根軸線時(shí)不起作用

align-content: flex-start | flex-end | center | space-between | space-around | stretch

stretch（默認(rèn)值）：軸線沾滿整個(gè)交叉軸

space-between：與交叉軸兩端對(duì)齊，軸線間的間隔平均分布

space-around：每根軸線兩側(cè)的間隔相等

flex-start：與交叉軸起點(diǎn)對(duì)其

4 flex-item的屬性 
在flex-item上設(shè)置的屬性同樣是6個(gè)：

order: ;： 定義flex-item在主軸上的排列順序。數(shù)值越小，排列越靠前，默認(rèn)值為0。

flex-grow: ：定義flex-item在主軸上的放大比例。默認(rèn)值為0：即使存在剩余空間（寬度），也不放大。

如果所有flex-item的flex-grow屬性值都是1，表示它們均分剩余空間（如果有）

如果一個(gè)flex-item屬性值為2，其余為1：前者占據(jù)的空間是后者的2倍

flex-shrink: ：定義flex-item在主軸上的縮小比例。默認(rèn)值為1，即如果空間不足，該flex-item會(huì)縮小。

如果所有flex-item的flex-shrink屬性值都為1，在空間不足時(shí)，都將等比例縮小

flex-shrink為0的flex-item在空間不足時(shí)，不會(huì)縮小。

flex-basis: | auto：定義在分配剩余空間前，flex-item占據(jù)主軸的空間main size。默認(rèn)值為auto，表示flex-item本來的大小。

瀏覽器根據(jù)這個(gè)屬性計(jì)算是否存在多余空間

如果width和height值固定為絕對(duì)長度單位（如350px），該flex-item占據(jù)固定空間

flex屬性：是flex-grow、flex-shrink和flex-basis三個(gè)屬性的簡寫，默認(rèn)值為0 1 auto

兩個(gè)快捷值：none表示(0 0 auto)；auto表示(1 1 auto)

建議優(yōu)先使用屬性值，而非先多帶帶寫三個(gè)分離的屬性（瀏覽器會(huì)自動(dòng)推算相關(guān)值）

align-self：允許單個(gè)flex-item與其他flex-item在交叉軸有不同的對(duì)齊方式，可以覆蓋掉align-items的值

align-items: auto| flex-start | flex-end | center | baseline | strecth

默認(rèn)值為auto：表示繼承父元素的align-items屬性

沒有父元素情況下等同于stretch

阮一峰教程Flex布局教程

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

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

相關(guān)文章

  • CSS頁面布局筆記

    摘要：居中布局水平居中父元素和子元素的寬度都未知優(yōu)點(diǎn)兼容性好缺點(diǎn)子元素文本繼承了屬性，子元素要額外加優(yōu)點(diǎn)只需要設(shè)置子元素的樣式優(yōu)點(diǎn)居中子元素不會(huì)對(duì)其他元素產(chǎn)生影響缺點(diǎn)是的屬性，存在兼容性問題優(yōu)點(diǎn)只需要設(shè)置父元素的樣式缺點(diǎn)兼容性問 居中布局 水平居中 父元素和子元素的寬度都未知 inline-block + text-ailgn .child{display:inline-block;} ...

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

  • HTML、CSS筆記

    摘要：相鄰的兄弟元素相鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷。塊級(jí)父元素與其第一個(gè)最后一個(gè)子元素如果塊級(jí)父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時(shí)，此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并現(xiàn)象。 盒模型 在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個(gè)。這個(gè)模型描述了元素所占空間的內(nèi)容。每個(gè)盒子有四個(gè)邊：外邊距邊, 邊框邊, 內(nèi)填充邊 與 內(nèi)容邊。 在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度=...

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

  • HTML、CSS筆記

    摘要：相鄰的兄弟元素相鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷。塊級(jí)父元素與其第一個(gè)最后一個(gè)子元素如果塊級(jí)父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時(shí)，此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并現(xiàn)象。 盒模型 在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個(gè)。這個(gè)模型描述了元素所占空間的內(nèi)容。每個(gè)盒子有四個(gè)邊：外邊距邊, 邊框邊, 內(nèi)填充邊 與 內(nèi)容邊。 在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度=...

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

  • CSS Flexbox學(xué)習(xí)筆記

    摘要：本文記錄了我在學(xué)習(xí)前端上的筆記，方便以后的復(fù)習(xí)和鞏固。注意項(xiàng)目現(xiàn)在顯示的寬度是他們的默認(rèn)寬度。各行將會(huì)伸展以占用剩余的空間。在其它情況下，剩余空間被所有行平分，擴(kuò)大各行的側(cè)軸尺寸。這不會(huì)影響源代碼。不要忘記了，默認(rèn)情況下，項(xiàng)目的值為。 本文記錄了我在學(xué)習(xí)前端上的筆記，方便以后的復(fù)習(xí)和鞏固。 開始使用Flex 在父元素中的顯式的設(shè)置displa...

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

  • CSS 小結(jié)筆記之伸縮布局 (flex)

    摘要：相關(guān)的各個(gè)屬性如下在父盒子定義，子盒子才能使用屬性設(shè)置子盒子的縮放比例，可以一起指定也可以單獨(dú)指定。子盒子在父盒子中的水平對(duì)齊方式。強(qiáng)行在一行顯示，因此每個(gè)盒子的大小都會(huì)減少。CSS flex 是一種伸縮布局，之前塊級(jí)元素布局在同一行，可以通過display或position或float來實(shí)現(xiàn)，而本篇介紹一個(gè)新的方法——flex（彈性布局）。 flex 為和模型布局提...

    番茄西紅柿 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<