一、介紹
flex（ flexible box：彈性布局盒模型）,是2023年w3c提出的一種可以簡潔、快速彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支援：
二、了解兩個基本概念：
容器：需要新增彈性布局的父元素；
專案：彈性布局容器中的每乙個子元素，稱為專案；
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
三、容器屬性詳述
1.flex-direction
flex-direction屬性決定主軸的方向（即專案的排列方向）。
row:主軸為水平方向，專案沿主軸從左至右排列
column：主軸為豎直方向，專案沿主軸從上至下排列
row-reverse：主軸水平，專案從右至左排列，與row反向
column-reverse：主軸豎直，專案從下至上排列，與column反向
flex-wrap：定義，如果一條軸線排不下，如何換行。
nowrap：自動縮小專案，不換行
wrap：換行，且第一行在上方
wrap-reverse：換行，第一行在下面
3、flex-flow
flex-direction屬性和flex-wrap屬性的縮寫形式，預設值為row nowrap
4、justify-content
決定item在主軸上的對齊方式，可能的值有flex-start（預設），flex-end，center，space-between，space-around。當主軸沿水平方向時，具體含義為
flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分布
5、align-items
align-items屬性：定義專案在交叉軸上的排列方式
flex-start：頂端對齊
flex-end：底部對齊
center：豎直方向上居中對齊
baseline：item第一行文字的底部對齊
stretch：當item未設定高度時，item將和容器等高對齊
align-content屬性：定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分布
stretch：各行將根據其flex-grow值伸展以充分佔據剩餘空間
效果圖如下
四、作用於專案上的屬性
1、order
order的值是整數，預設為0，整數越小，排列越靠前，如下圖所示**如下
定義了當flex容器有多餘空間時，item是否放大。預設值為0，即當有多餘空間時也不放大；可能的值為整數，表示不同item的放大比例，如
<即當有多餘空間時item1、item2、和item3以1：2:3的比例放大。div
class
="wrap"
>
<
div
class
="div"
style
="flex-grow:1"
>1
div>
<
div
class
="div"
style
="flex-grow:2"
>2
div>
<
div
class
="div"
style
="flex-grow:3"
>3
div>
div>
3、flex-shrink
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-self屬性 ：定義單個專案自身在交叉軸上的排列方式，可以覆蓋掉讓其上的align-items屬性
屬性值：與align-items相同，預設值為auto，表示繼承父容器的align-items屬性。
Flex布局（彈性布局）學習筆記
相關的css屬性 flex flow是felx direction和flex wrap的縮寫屬性 flex direction 決定主軸的方向 1.row 主軸方向從左到右 預設值 2.row reverse 主軸方向從右到左 3.column 主軸方向從上到下 4.column reverse 主...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...