一. Flex 彈性布局簡介
1. CSS 的布局模式
- CSS 擁有多種的布局模式，以應(yīng)對各種場景下的位置關(guān)系
- CSS 主要的布局模式有：
- 塊布局
- 行內(nèi)布局
- 表格布局
- 定位布局
- 浮動布局
- 媒體查詢
- Flex 彈性布局
- Grid 網(wǎng)格布局
2. Flex 彈性布局概念
- 彈性布局是指通過調(diào)整其內(nèi)元素的寬高，從而在任何顯示設(shè)備上實(shí)現(xiàn)對可用顯示空間最佳填充的能力
- 彈性容器擴(kuò)展其內(nèi)元素來填充可用空間，或?qū)⑵涫湛s來避免溢出
二. Flex 彈性布局實(shí)戰(zhàn)
1. 相關(guān)術(shù)語
Flex 彈性布局相關(guān)術(shù)語
2. 彈性容器
- 使用 Flex 彈性布局需要定義一個容器，表明該容器內(nèi)部使用 Flex 彈性布局
.box { display: flex; }
.box { display: inline-flex; }
- 設(shè)置 Flex 布局以后，子元素的
flex、clear和vertical-align屬性將會失效
3. 彈性項(xiàng)目
- 彈性容器的每個子元素都稱為彈性項(xiàng)目
- 彈性容器直接包含的文本將被包裹成匿名彈性單元
4. 定義主軸與換行
- 使用
flex-direction在 彈性容器 中定義 Flex 彈性布局的主軸以及主軸方向
.box { flex-direction: row ( default ) | row-reverse | column | column-reverse ; }
row（默認(rèn)）：主軸為水平，方向?yàn)閺淖笾劣?/div>
row-reverse：主軸為水平，方向?yàn)閺挠抑磷?/div>
column：主軸為垂直，方向?yàn)閺纳现料?/div>
column-reverse：主軸為垂直，方向?yàn)閺南轮辽?/div>
- 使用
flex-wrap在 彈性容器 中定義當(dāng) 彈性項(xiàng)目 溢出時該如何換行
.box { flex-wrap: nowrap ( default ) | wrap | wrap-reverse ; }
nowrap（默認(rèn)）：不換行，將會拉伸彈性項(xiàng)目
wrap：正常換行
wrap-reverse：溢出的部分在反方向換行
- 使用
flex-flow屬性在 彈性容器 上同時定義flex-direction和flex-wrap屬性
.box { flex-flow: <flex-direction> <flex-wrap> ; }
5. 彈性項(xiàng)目的排布
- 使用
justify-content屬性在 彈性容器 上定義在當(dāng)前行上，彈性項(xiàng)目 沿主軸如何排布
.box { justify-content: flex-start ( default ) | flex-end | center | space-between | space-around ; }
flex-start（默認(rèn)）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，項(xiàng)目之間的間隔都相等
space-around：分散對齊，項(xiàng)目兩側(cè)的間隔相等
- 使用
align-items屬性在 彈性容器 上定義在當(dāng)前行上，彈性項(xiàng)目 沿側(cè)軸如何排布- 如果 彈性項(xiàng)目 具有實(shí)際高度，默認(rèn)的排布方式為
flex-start - 如果 彈性項(xiàng)目 未設(shè)置高度或設(shè)為
auto，默認(rèn)的排布方式為stretch
- 如果 彈性項(xiàng)目 具有實(shí)際高度，默認(rèn)的排布方式為
.box { align-items: flex-start | flex-end | center | baseline | stretch ; }
flex-start：按側(cè)軸的起點(diǎn)對齊
flex-end：按側(cè)軸的終點(diǎn)對齊
center：按側(cè)軸的中點(diǎn)對齊
baseline：按彈性項(xiàng)目第一行文字的基線對齊
stretch：彈性項(xiàng)目將會占滿整個彈性容器的高度
- 使用
align-content屬性在 彈性容器 上定義在多個主軸的情況下，彈性項(xiàng)目 在側(cè)軸上如何排布
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch ; }
flex-start：按側(cè)軸的起點(diǎn)對齊
flex-end：按側(cè)軸的終點(diǎn)對齊
center：按側(cè)軸的中點(diǎn)對齊
space-between：按側(cè)軸兩端對齊，軸線之間的間隔平均分配
space-around：按側(cè)軸分散對齊，每根軸線的兩側(cè)間隔都相等
stretch：彈性項(xiàng)目在每個軸上平均占滿整個側(cè)軸
6. 彈性項(xiàng)目的順序
- 使用
order屬性在 彈性項(xiàng)目 上定義 彈性項(xiàng)目 的順序
.flex-item { order: <integer>; } // default: 0
括號內(nèi)的值為彈性項(xiàng)目的 order 屬性值
7. 彈性項(xiàng)目的放大比例
- 使用
flex-grow屬性在 彈性項(xiàng)目 上定義 彈性項(xiàng)目 的放大比例 -
flex-grow屬性的默認(rèn)值為 0，即如果存在剩余空間，也不會放大 - 彈性項(xiàng)目將按照各自的
flex-grow屬性值成比例的放大
.flex-item { flex-grow: <number>; } // defalut: 0
- 括號內(nèi)表示彈性項(xiàng)目
flex-grow屬性的值
按照 0：2：1 放大
按照 1：1：2 放大
8. 彈性項(xiàng)目的縮小比例
- 使用
flex-shrink屬性在 彈性項(xiàng)目 上定義 彈性項(xiàng)目 的縮小比例 -
flex-shrink屬性的默認(rèn)值為 1，即如果空間不足，該彈性項(xiàng)目將會縮小 - 彈性項(xiàng)目將按照各自的
flex-shrink屬性值成比例的縮小
.flex-item { flex-shrink: <number>; } // default: 1
按照 0：1：1 縮小
按照 2：1：2 縮小
9. 彈性項(xiàng)目的初始大小
- 使用
flex-basis屬性在 彈性項(xiàng)目 上定義 彈性項(xiàng)目 在主軸方向上的初始大小 -
flex-basis屬性會根據(jù)當(dāng)前的主軸相應(yīng)覆蓋 彈性項(xiàng)目 的height或width屬性
.flex-item { flex-basis: <length> | auto ; } // default: auto
10. 彈性項(xiàng)目的放大縮小和大小的簡寫
- 使用
flex屬性在 彈性項(xiàng)目 上定義flex-grow、flex-shrink和flex-basis屬性的簡寫
.flex-item { flex: <flex-grow> <flex-shrink> <flex-basis> ; }
11. 單個彈性項(xiàng)目在側(cè)軸的排布方式
- 使用
align-self屬性在 彈性項(xiàng)目 上定義單個彈性項(xiàng)目如何在側(cè)軸上進(jìn)行排布，這個定義會覆蓋由align-items屬性所確立的默認(rèn)值
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
- 文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
- 正文 為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
- 正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設(shè)為Flex布局以后，...
- 移動開發(fā)基本知識點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
- H5移動端知識點(diǎn)總結(jié) 閱讀目錄 移動開發(fā)基本知識點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
17贊18贊
贊賞
手機(jī)看全文