Flex布局筆記

Lin_YT 發(fā)布于2019-08-29 17:00 / 1698人閱讀

摘要：布局教程地址控制換行屬性控制軸線的方向行行反轉(zhuǎn)列列反轉(zhuǎn)主軸線的對齊開始對齊結(jié)束對齊居中兩端水平分布等間距分布交錯軸線的對齊開始對齊結(jié)束對齊居中沿著他們自己的基線對齊與行高有關(guān)默認(rèn)值所有容器一樣高默認(rèn)的

Flex布局教程地址
https://www.youtube.com/watch...
https://paper.dropbox.com/doc...
https://www.w3cplus.com/css3/...

控制換行屬性

flex-wrap: wrap | nowrap | wrap-reverse；

flex-direction 控制軸線的方向
flex-direction: row | row-reverse | column | column-reverse;

           行     行反轉(zhuǎn)      列        列反轉(zhuǎn)

·justify-content:
Main-Axis, 主軸線的對齊
justify-content: flex-start | flex-end | center | space-between | space-around;

           開始對齊  結(jié)束對齊   居中   兩端水平分布     等間距分布

·align-items：
Cross-Axis, 交錯軸線的對齊
align-items: flex-start | flex-end | center | baseline | stretch;

         開始對齊   結(jié)束對齊     居中     沿著他們自己的基線對齊,與行高有關(guān)     默認(rèn)值,所有容器一樣高

align-items: baseline；

align-items: center;

默認(rèn)的Main-Axis方向是從左到右，Cross-Axis方向是從上到下吧？

當(dāng)用 flex-direction: column 時，Main-Axis和Cross-Axis會向如下所看到的那樣改變：
flex-direction: column
align-item: felx-end;

flex速記

flex是flex-grow、flex-shrink和flex-basis三個屬性的速記（簡寫）

li { flex: 0 1 auto; }

上面的代碼相當(dāng)于：

li { flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto; }

讓文字居中
除了text-align: center; line-height; 的方法外，還可用flex方法：

.four li{
    display: flex;
    justify-content: center;
    align-items: center;
}

讓flex項固定寬度,不跟隨內(nèi)容自動伸展

設(shè)置flex項的寬度為0即可（貌似不兼容firefox）
.wrap{
　　display:flex;
}
.wrap .item{
　　flex:1;
　　width:0px;
}

GPU云服務(wù)器云服務(wù)器 flex布局 flex flex40 flex 教程

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

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

相關(guān)文章

筆記：flex 的完備性與正交性

摘要：筆記布局很容易與其他布局方式包括布局嵌套在一起，實(shí)際上它是一個獨(dú)立的盒子，這個盒子由一個元素稱為容器及其直接的子元素稱為項目構(gòu)成。這個容器外部以及這些項目內(nèi)部都不會受布局的影響。筆記： flex 布局很容易與其他布局方式（包括 flex 布局）嵌套在一起，實(shí)際上它是一個獨(dú)立的盒子，這個盒子由一個元素（稱為容器）及其直接的子元素（稱為項目）構(gòu)成。這個容器外部以及這些項目內(nèi)部都不會受 f...

MingjunYang 2019-08-29 13:46 評論0 收藏0
Flex布局語法筆記

摘要：布局的傳統(tǒng)解決方案，基于盒狀模型，依賴屬性屬性屬性。一基礎(chǔ)和術(shù)語布局是啥是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性?；靖拍畈捎貌季值脑兀Q為容器，簡稱容器。該屬性的個值分別表示具體對齊方式與軸的方向有關(guān)。 ???????網(wǎng)頁布局（layout）是 CSS 的一個重點(diǎn)應(yīng)用。布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + floa...

legendmohe 2019-08-30 11:02 評論0 收藏0
CSS頁面布局筆記

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

CoderDock 2019-08-28 18:14 評論0 收藏0
CSS 小結(jié)筆記之伸縮布局 (flex)

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

番茄西紅柿 2019-04-23 13:22 評論0 收藏0
CSS || flex筆記

摘要：五個取值與主軸方向有關(guān)默認(rèn)值左對齊右對齊居中兩端對其，間的間隔距離相等每個兩側(cè)的間隔相等，相當(dāng)于設(shè)置左右值相等。默認(rèn)值為即使存在剩余空間寬度，也不放大。默認(rèn)值為，表示本來的大小。 Flex布局 Flex是flexible box的簡稱，純粹用來布局的屬性 1 flex和inline-flex 任何容器都可以知道為Flex布局，塊級元素使用display: flex; ；行內(nèi)元素使用i...

huhud 2019-08-29 12:16 評論0 收藏0