彈性布局課堂筆記

彈性布局，又稱「flex布局」，是由w3c老大哥於2023年推出的一種布局方式。可以簡便、完整、響應式地實現各種頁面布局。而且已經得到所有主流瀏覽器的支援，我們可以放心大膽的使用。

容器： 需要新增彈性布局的父元素；

專案：彈性布局容器中的每乙個子元素，稱為專案；

主軸： 在彈性布局中，我們會通過屬性規定水平/垂直方向為主軸；

交叉軸： 與主軸垂直的另一方向，稱為交叉軸。

給父容器新增display: flex/inline-flex;屬性，即可使容器內容採用彈性布局顯示，而不遵循常規文件流的顯示方式；

容器新增彈性布局後，僅僅是容器內容採用彈性布局，而容器自身在文件流中的定位方式依然遵循常規文件流；

display:flex; 容器新增彈性布局後，顯示為塊級元素；

display:inline-flex; 容器新增彈性布局後，顯示為行級元素；

設為 flex布局後，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。

123

4

#div

#div div

flex-wrap屬性定義，如果一條軸線排不下，如何換行。

flex-flow 是flex-direction和flex-wrap的縮寫形式，預設值為：flex-flow: row wrap; 不做過多解釋

justify-content屬性定義了專案在主軸上的對齊方式。

此屬性與主軸方向息息相關。

主軸方向為：row-起點在左邊，row-reverse-起點在右邊， column-起點在上邊，column-reverse-起點在下邊

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

(當專案換為多行時，可使用align-content取代align-items)

flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

flex-basis定義專案佔據的主軸空間。(如果主軸為水平，則設定這個屬性，相當於設定專案的寬度。 原width將會失效。)

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。

此屬性有兩個快捷設定：auto=(1 1 auto)/none=(0 0 auto)

屬性值：與align-items相同，預設值為auto，表示繼承父容器的align-items屬性值。

>屬性值：與align-items相同，預設值為auto，表示繼承父容器的align-items屬性值。

[外鏈轉存中...(img-npzv4tlk-1604490432496)]

彈性布局筆記

彈性布局 彈性容器 設定了display flex 這個元素稱為彈性容器。裡面的子元素會按照彈性布局方式進行布局。彈性子元素 彈性容器的直接子元素。彈性主軸方向 flex direction row 左 右，預設 column 上 下 row reverse 右 左 column reverse 下...

CSS Flex彈性布局 筆記

flexbox 是 flexible box 的簡稱 注 意思是 靈活的盒子容器 是 css3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可 地展現出來。它之所以被稱為 flexbox 是因為它能夠擴充套件和收縮 flex 容器內的元素，以最大限度地填充可用空...

Flex布局（彈性布局）學習筆記

相關的css屬性 flex flow是felx direction和flex wrap的縮寫屬性 flex direction 決定主軸的方向 1.row 主軸方向從左到右 預設值 2.row reverse 主軸方向從右到左 3.column 主軸方向從上到下 4.column reverse 主...