資訊專欄INFORMATION COLUMN
摘要：占滿交叉軸上所有的空間使用容器定義的的值以上就是我對彈性布局的一些知識點總結(jié)，如有異議，煩請告知，謝謝不努力就淘汰
彈性布局
彈性布局，是一種布局方式
主要解決某個元素中子元素的布局方式
它為布局提供了強大的靈活性
基本設(shè)置
display: flex; // 將塊級元素設(shè)置為容器 display: inline-flex // 將行內(nèi)元素設(shè)置為容器
這里出現(xiàn)了容器這個詞，在彈性布局中有容器和項目的說法
容器：要發(fā)生(設(shè)置)彈性布局的子元素，的**父元素**稱為容器 項目：要做彈性布局的**子元素們**，稱之為項目
彈性布局中也有主軸和交叉軸的概念
項目們排列方向的一條軸(類似坐標(biāo)軸中的x、y軸),就稱為主軸 和這條主軸垂直相交的軸，就稱為交叉軸 默認(rèn)主軸方向是橫向排列，即主軸 -> x軸
特點
當(dāng)元素設(shè)置成彈性容器后，它的所有子元素變成彈性項目 此時項目的float/clear/vertical-align屬性會失效容器中的屬性
設(shè)置主軸方向
flex-direction: 取值：row，默認(rèn)值，主軸是x軸，主軸起點是左端 row-reverse, 主軸是x軸，主軸起點是右端 column，主軸是y軸，主軸起點在頂部 column-reverse,主軸是y軸，主軸起點在底部
設(shè)置項目的換行顯示
flex-wrap: 取值：nowrap 默認(rèn)值，空間不夠時，也不換行，項目自動縮小 wrap 空間不夠就換行 wrap-reverse 換行，并反轉(zhuǎn)
上面兩項屬性可以縮寫成
flex-flow:
定義項目在主軸上的對齊方式
justify-content: 取值：flex-start,默認(rèn)值，以主軸起點對齊 flex-end，以主軸終點對齊 center 在主軸上居中對齊 space-between 兩端對齊，兩端無空白 space-around 每個間距大小相同，兩邊會留白
定義項目在交叉軸上的對齊方式
align-items: 取值：flex-start 交叉軸起點對齊 flex-end 交叉軸終點對齊 center 交叉軸居中對齊 baseline 交叉軸基線對齊，就是交叉軸起點 stretch 前提，項目不寫高。占滿交叉軸上所有的空間項目中的屬性
只能設(shè)置在其中一個項目上，不會影響其他項目的效果
order
定義項目排列順序，值越小，越靠近起點，默認(rèn)值為0 取值：無單位的整數(shù)
flex-grow
定義項目的放大比例 如果容器有足夠大的剩余空間，項目將按比例放大 取值：無單位整數(shù)，默認(rèn)值0，不放大
flex-shrink
定義項目縮小的比例，容器空間不足時，項目該如何縮小 取值：無單位整數(shù)，默認(rèn)值為1。 取值為0，不縮小。取值越大，縮小越快。
flex-basis
主軸存在剩余空間時，分配給此項目多少空間，默認(rèn)auto即本身寬度 類似height和width寫法
以上三個屬性可以縮寫為
flex: 默認(rèn)值是 0 1 auto 常用寫法 flex:1 -> 1 1 auto 利用這個可以方便的實現(xiàn)**圣杯布局** 轉(zhuǎn)載一個自認(rèn)為不錯的實現(xiàn)方法[css圣杯布局的實現(xiàn)][1]
align-self
定義當(dāng)前項目在交叉軸上的對齊方式 這個屬性會覆蓋掉容器設(shè)置的align-items屬性 取值：flex-start 交叉軸起點對齊 flex-end 交叉軸終點對齊 center 交叉軸居中對齊 baseline 交叉軸基線對齊，就是交叉軸起點 stretch 前提，項目不寫高。占滿交叉軸上所有的空間 auto 使用容器定義的align-items的值
以上就是我對彈性布局的一些知識點總結(jié)，如有異議，煩請告知，謝謝
不努力
就淘汰
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114780.html
摘要：了解標(biāo)簽在各瀏覽器當(dāng)中的默認(rèn)樣式，可以讓我們了解，為什么會要寫，當(dāng)中要怎么寫樣式最合理。 了解HTML標(biāo)簽在各瀏覽器當(dāng)中的默認(rèn)樣式，可以讓我們了解，為什么會要寫Reset.css，Reset.css當(dāng)中要怎么寫樣式最合理。試著思考下面的問題： 為什么會有默認(rèn)樣式？ 每個瀏覽器的默認(rèn)樣式有什么不同？ Reset.css具體怎么寫，每個瀏覽器展示的效果才會一致？ 默認(rèn)樣式 這里說的默認(rèn)...
答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@?？途W(wǎng)發(fā)布的真實大廠前端面經(jīng)題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復(fù)，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...
答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@?？途W(wǎng)發(fā)布的真實大廠前端面經(jīng)題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復(fù)，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...
閱讀 1467·2021-11-24 09:39
閱讀 3641·2021-09-29 09:47
閱讀 1584·2021-09-29 09:34
閱讀 3087·2021-09-10 10:51
閱讀 2552·2019-08-30 15:54
閱讀 3230·2019-08-30 15:54
閱讀 883·2019-08-30 11:07
閱讀 1022·2019-08-29 18:36
