flex布局又稱(彈性布局)是w3c組織在2023年提出的乙個新的布局方案，其宗旨是讓頁面的樣式布局更加簡單，並且可以很好地支援響應式布局,主要作用在容器上
flex-direction:該屬性的值確定主軸的方向，軸有兩個方向，分別是水平和垂直
首次，設定display:flex;讓flex布局生效
flex-direction:row;主軸水平，方向為自左向右
flex-direction:row-reverse;主軸水平，方向為自右向左
flex-direction:column;主軸垂直，方向自上而下
flex-direction:column-reverse;主軸垂直，方向自下而上
改寫**，執行效果如下：
交叉軸 若主軸方向為垂直，則交叉軸的方向為水平
align-items:該屬性定義子元素在交叉軸上如何對齊
rpx 可以使元件自適應螢幕的高度和寬度 px 則不會
移動解析度
px 物理解析度 pt 邏輯解析度
iphone 6 的寬度750個物理畫素為標準，只有在此尺寸下1物理畫素=1rpx=0.5px
如圖以iphone 6舉例，水平方向有375個邏輯畫素點，垂直方向有667個邏輯畫素點
1pt=2px
flex布局巢狀之高度自適應
查遍各大資源無任何flex巢狀布局的例子，經過自己折騰完成了專案中的高度自適應需求 更多應用於前端元件 效果圖 html 關鍵地方已經用顏色特別標識 doctype html html head meta charset utf 8 title flex 巢狀 之 高度自適應 title style...
兩欄自適應布局與高度自適應
float bfc 使用 float 讓 left 塊脫離文件流，使用 bfc 規則，讓 right 塊寬度自適應，如下 類似聖杯布局給父元素設定 padding left right 元素寬度 100 left 元素通過 設定 left 和 margin left 屬性拉取到前面 flexflex...
自適應布局
請你說一說你知道的所有web布局方式？1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...