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