?HTML基礎(chǔ)14_彈性盒布局 彈性盒布局的含義 Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性,旨在提供一個更 有效地布局、對齊方式，并且能夠使容器中的子元素大小未知或動態(tài)變化情況下仍然能夠分配好子 元素之間的空間。 彈性盒布局的作用 我們之前的傳統(tǒng)布局, 依賴于盒模型, display, position, ?oat, 但是我們以上的布局方式在解決布局 問題時, 多多少少會有一些不夠優(yōu)雅的地方, 比如: 元素的垂直居中, 而Flex(彈性布局) 是W3C推出的 一種全新的布局方式, 可以簡便,快捷, 響應(yīng)式的完成各種頁面的布局效果. 目前, ?ex布局已兼容所有 瀏覽器。 彈性盒布局的適用場景 基本網(wǎng)格布局: 最簡單的網(wǎng)格布局，就是平均分布。在容器里面平均分配空間，骰子布局很像，但 是需要設(shè)置項目的自動縮放。 百分比布局:某個網(wǎng)格的寬度為固定的百分比，其余網(wǎng)格平均分配剩余的空間。 圣杯布局: 圣杯布局(Holy Grail Layout）指的是一種最常見的網(wǎng)站布局。頁面從上到下，分成三個 部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右 為：導(dǎo)航、主欄、副欄。

流式布局

懸掛式布局

彈性盒布局的具體用法 ?ex的基本概念: 容器 (?ex container): 設(shè)置了display:?ex或者inline-?ex的元素 彈性子元素(?ex item): 容器里的所有子元素 主軸(main axis)和側(cè)軸(交叉軸)(cross axis) 這兩個軸不真實存在。 主軸\"默認\"是水平的, \"默認\"方向從容器的左邊(main start)延伸至容器的右邊(main end)。 側(cè)軸\"默認\"與主軸垂直, \"默認\"方向從容器的頂部(cross start)延伸至容器的底部(cross end)。

與彈性布局有關(guān)的樣式 一. 容器有關(guān)的樣式 將元素設(shè)置成容器: display:?ex/inline-?ex 設(shè)置主軸的方向: ?ex-direction row 默認值 水平方向, 從左至右。 row-reverse 水平方向, 從右至左。 column 垂直方向, 從上至下。 column-reverse 垂直方向, 從下至上。 彈性子元素的換行方式: ?ex-wrap nowrap 默認值, 不換行, 如果彈性子元素的總寬度超過容器的寬, 系統(tǒng)會強制壓縮彈性子元素 的寬度以適應(yīng)容器。 wrap 換行。 wrap-reverse 反向換行。

彈性子元素在主軸上的對齊方式: justify-content ?ex-start 主軸起點對齊。 ?ex-end 主軸終點對齊。 center 主軸居中。 space-around 所有元素沿主軸兩個方向等距。 space-between 主軸方向兩端元素靠邊, 每個元素間隔等距。 單行彈性子元素在側(cè)軸上的對齊方式: align-items ?ex-start 側(cè)軸起點對齊。 ?ex-end 側(cè)軸終點對齊。 center 側(cè)軸居中。 stretch 默認值, 規(guī)定彈性子元素在側(cè)軸方向上的高度, 默認填滿整個側(cè)軸, 該效果只在不設(shè)置 彈性子元素高度的情況下才會出現(xiàn)。 baseline 基線 對齊。

多行彈性子元素在側(cè)軸上的對齊方式: align-content ?ex-start 側(cè)軸起點對齊。 ?ex-end 側(cè)軸終點對齊。 center 側(cè)軸居中。 stretch 默認值, 規(guī)定彈性子元素在側(cè)軸方向上的高度, 默認填滿整行, 該效果只在不設(shè)置彈性 子元素高度的情況下才會出現(xiàn)。 space-between 側(cè)軸方向兩端元素靠邊, 每個元素間隔等距。 space-around 所有元素沿側(cè)軸兩個方向等距。

二. 彈性子元素有關(guān)的樣式 調(diào)整彈性子元素的排列順序: order, 默認值都是0, 設(shè)置的值越小, 元素越向前排布. 如果值相同, 按 照默認的書寫順序排序。

align-self單獨調(diào)整每個彈性子元素在側(cè)軸上的對齊方式。 ?ex-start 側(cè)軸起點對齊。 ?ex-end 側(cè)軸終點對齊。 center 側(cè)軸居中。 stretch 默認值, 規(guī)定彈性子元素在側(cè)軸方向上的高度, 默認填滿整個側(cè)軸, 該效果只在不設(shè)置 彈性子元素高度的情況下才會出現(xiàn)。 baseline 基線 對齊。 彈性子元素多余空間的分配比例 ?ex-grow: 默認值是0(不分配), 可以填寫不同的比例來讓彈性子元 素分配多余的空間。

彈性子元素當空間不足時的收縮比例 ?ex-shrink: 默認值是1。 計算公式: 步驟1: 計算權(quán)重 (每個元素的原始寬度x每個元素的收縮比例)的和 步驟2: 計算溢出量 所有彈性子元素的寬度和 - 容器的寬度 步驟3: 計算具體的收縮值 元素的原始寬度x收縮比例÷權(quán)重x溢出 例子: div1: 原始寬度300px 收縮比例1 div2: 原始寬度220px 收縮比例1 div3: 原始寬度180px 收縮比例1 權(quán)重: 300*1+220*1+180*1 == 700 溢出量: 300+220+180-400 == 300 div1的收縮的值: 300*1/700*300 == 128.571 div2的收縮的值: 220*1/700*300 == 94.285 div3的收縮的值: 180*1/700*300 == 77.142 彈性子元素的理想尺寸 ?ex-basis 該樣式可以理解為彈性子元素被放進容器之前的大小, 是我們假設(shè)或者理想的尺寸大小, 但是 并不一定是真實的大小, 彈性子元素最終的真實大小取決于容器。 彈性子元素的應(yīng)用準則: content < width < ?ex-basis < (limted max | min-width)。 彈性子元素的寬度如果不設(shè)置, 默認由內(nèi)容撐出或者由?ex-grow的比例決定。 如果設(shè)置了width, 以width為準。 如果同時設(shè)置了width和?ex-basis, 以?ex-basis為準。 width與?ex-basis的區(qū)別: ?ex-basis的優(yōu)先級大于width。 ?ex-basis只對彈性子元素起作用, 普通元素沒有效果。 當主軸是水平時, ?ex-basis作用的是元素的寬; 當主軸是垂直時, ?ex-basis作用的是元素的 高。 ?ex-basis對絕對定位的元素不起效果。 ?ex 是?ex-grow, ?ex-shrink, ?ex-basis三者的合寫形式 ?ex的默認值:0 1 auto(尺寸等于靈活的項目尺寸)。 ?ex:auto; 相當于 1 1 auto。 ?ex:none; 相當于 0 0 auto。 ?ex:1; 相當于 1 1 0%。

課堂總結(jié) 掌握彈性盒模型的基本概念及實現(xiàn)原理。 掌握彈性盒布局的主軸和交叉軸的關(guān)系。 掌握主軸對齊方式和交叉軸對齊方式。 掌握彈性盒子和彈性子元素的各種布局屬性。