資訊專(zhuān)欄INFORMATION COLUMN
摘要：起始值，分配多余空間前的初始長(zhǎng)度主軸橫向時(shí)是寬度可用的長(zhǎng)度值，如等瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。
目前純文字描述，后期補(bǔ)上圖片說(shuō)明概念
主軸：main-axis，默認(rèn)橫向的軸
交叉軸：cross-axis，默認(rèn)縱向的軸，有的稱(chēng)為側(cè)軸，與主軸90°中心旋轉(zhuǎn)交叉
彈性布局的結(jié)構(gòu)容器css11
.flex-container{
/*主軸方向： row行（橫向） | row-reverse反向行 | column列（縱向） | column-reverse反向列 */
flex-direction: row;
/*換行：nowrap不換行 | wrap換行 | wrap-reverse反向換行（往上換行）*/
flex-wrap: nowrap;
/*以上兩者的簡(jiǎn)寫(xiě)*/
/*flex-flow: || ;*/
/*
主軸的對(duì)齊方式：
flex-start主軸起點(diǎn)對(duì)齊（橫向是左對(duì)齊，縱向是上對(duì)齊）
flex-end主軸終點(diǎn)對(duì)齊
center主軸中點(diǎn)對(duì)齊
space-between兩端對(duì)齊
space-around兩端對(duì)齊，每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等并向中間靠攏
*/
justify-content: flex-start;
/*
交叉軸的對(duì)齊方式：
flex-start | flex-end | center
baseline項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊
stretch拉長(zhǎng)，如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度
*/
align-items: stretch;
/*
多根軸線(xiàn)時(shí)交叉軸對(duì)齊方式（換行時(shí)可產(chǎn)生多根軸線(xiàn)，不換行只有一根軸線(xiàn)此值無(wú)效）：
flex-start | flex-end | center
space-between兩端對(duì)齊
space-around兩端對(duì)齊，每個(gè)軸線(xiàn)兩側(cè)的間隔相等向中間靠攏
stretch拉長(zhǎng)，所有軸線(xiàn)占滿(mǎn)整個(gè)容器
*/
align-content: stretch;
}
項(xiàng)目css
.flex-item{
/*排列順序：數(shù)值越小，排列越靠前，默認(rèn)為0*/
order: 0;
/*放大比例，與有設(shè)置該值的項(xiàng)按比例放大并占滿(mǎn)空間，默認(rèn)為0即如果存在剩余空間，也不放大*/
flex-grow: 0;
/*縮小比例，項(xiàng)目在主軸總寬度超出100%對(duì)當(dāng)前項(xiàng)按比例縮小，默認(rèn)為1即如果空間不足，該項(xiàng)目將縮小。*/
flex-shrink: 1;
/*
起始值，分配多余空間前的初始長(zhǎng)度（主軸橫向時(shí)是寬度）【width/height可用的長(zhǎng)度值，如1px/1em/1rem/auto/30%等】
瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。
*/
flex-basis: auto;
/*以上三者的簡(jiǎn)寫(xiě)*/
/*flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ];*/
/*
語(yǔ)法糖解析：
//none快捷鍵
flex:none = flex:0 0 auto
//數(shù)字(grow,shrink=1,basis=0)
flex:2 = flex:2 1 0
//數(shù)字，數(shù)字(grow,shrink,basis=0)
flex:2 3 = flex:2 3 0
//非數(shù)字(grow=1,shrink=1,basis)
flex:30px = flex:1 1 30px
flex:30% = flex:1 1 30%
flex:auto = flex:1 1 auto
//數(shù)字，非數(shù)字(grow,shrink=1,basis)
flex:2 30px = flex:2 1 30px
flex:2 30% = flex:2 1 30%
flex:2 auto = flex:2 1 auto
//數(shù)字，數(shù)字，非數(shù)字(grow,shrink,basis)
flex:2 3 30px
flex:2 3 30%
flex:2 3 auto
*/
/*
自身對(duì)齊方式：auto | flex-start | flex-end | center | baseline | stretch
默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch
*/
align-self: auto;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114992.html
摘要：布局也經(jīng)歷了一段演變歷史。不同于將要出現(xiàn)的網(wǎng)格布局針對(duì)目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而布局是基于流。 前言 你還在用display+position+float來(lái)進(jìn)行css布局嗎？有沒(méi)有覺(jué)得用傳統(tǒng)的這種布局方法來(lái)實(shí)現(xiàn)特殊布局特別麻煩困難，例如：垂直居中。今天來(lái)記錄一下自己對(duì)flex布局的了解（雖然不算神馬新東西了都可以說(shuō)是舊東西...
摘要：主要用來(lái)做橫向的布局。元素的布局學(xué)習(xí)我分成兩個(gè)部分，第一個(gè)部分是元素布局。以下幾個(gè)屬性影響著元素的布局。詳細(xì)還是看分鐘徹底弄懂布局講的非常明白。的時(shí)候，伸縮時(shí)需要考慮，按照進(jìn)行等比例伸縮。布局套路學(xué)習(xí)布局教程實(shí)例篇 前言：這是我看過(guò)最好的flex布局教程：30分鐘徹底弄懂flex布局 傳統(tǒng)的布局方法與flex屬性通覽 showImg(https://segmentfault.com/i...
摘要：列出這個(gè)兩個(gè)屬性的常用值看可知已經(jīng)增加了更多的值代碼解讀該項(xiàng)目是通過(guò)來(lái)渲染的，所以會(huì)使用到的語(yǔ)法，不過(guò)此處僅使用的循環(huán)來(lái)解決重復(fù)書(shū)寫(xiě)的問(wèn)題該效果參考來(lái)源。接著使用布局來(lái)將它們分割，因?yàn)檫@次主要將的不是，所以就不進(jìn)行闡述了。 介紹 其實(shí)這篇文章寫(xiě)到一大半時(shí)它的名字還叫做 《重溫 Flex 布局》，結(jié)果寫(xiě)著寫(xiě)著就走了心，附上一圖表示心情吧： showImg(https://segmentf...
閱讀 2646·2021-11-22 15:24
閱讀 1378·2021-11-17 09:38
閱讀 2754·2021-10-09 09:57
閱讀 1202·2019-08-30 15:44
閱讀 2446·2019-08-30 14:00
閱讀 3547·2019-08-30 11:26
閱讀 2939·2019-08-29 16:28
閱讀 755·2019-08-29 13:56
