清除浮動影響
很難實現居中
結構不靈活 不能隨時新增盒子
非常靈活 提供一套瀏覽器內建布局 特點：一維布局 固定的css屬性
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-ae7v8cwh-1607776830159)(media/彈性盒相容性.png)]
決定了 這個布局一般用在移動端
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-2e36ppxe-1607776830161)(media/彈性盒認識.png)]
1. 宣告彈性盒
-webkit-display
:flex;
display
:flex;
flex-direction
:row水平（預設）/row-reverse水平反向/column垂直/column-reverse垂直反向
justify-content
:flex-start 左對齊/flex-end右對齊 /center居中/space-around兩端間距等於中間的一半/space-between兩端對齊中間間距等分/space-evenly間距等分;
align-items
:flex-start上對齊/flex-end下對齊 /center居中/baseline基線對齊/stretch延伸，佔滿;
前提： 不想自動收縮的時候 ，子項寬度》父盒子寬度
flex-wrap
:wrap/nowrap/wrap-reverse;
flex-flow
:flex-direction flex-wrap;
flex
:flex-basis flex-shrink flex-grow;
flex-basis
: 子項的寬度(auto) 基礎寬度屬性
flex-shrink
:子項佔據彈性父盒子的溢位空間的比例 （子項寬度和》父盒子寬度的時候） 預設值為
:1flex-grow
: 子項佔據彈性父盒子的剩餘空間的比例 （子項寬度和《父盒子寬度的時候）預設值
:0flex
:auto 1 0;預設值
99%情況 剩餘空間 flex
:auto 1 n; ===> flex
:n;
設定各自的排列順序
order
:n;
align-self
:flex-start上對齊/flex-end下對齊 /center居中/baseline基線對齊/stretch延伸，佔滿;
align-content
:flex-start 左對齊/flex-end右對齊 /center居中/space-around兩端間距等於中間的一半/space-between兩端對齊中間間距等分/space-evenly間距等分;
好處:編碼速度會提高,維護相對容易 主旨： less is more
新建 .less —> 瀏覽器不認識.less —>編譯(.less—>.css)—>瀏覽器認識啦！
koala 考拉
缺點：彈框 提示錯誤
easyless
缺點：設定一下.css檔案路徑 稍微有點卡 重新匯入
方便的去儲存和獲取資料 —>其實就是乙個名字儲存乙個值 這個名字就叫變數
@變數名
:變數值;
@w:1000px;
@maincolor
:skyblue;
使用:.box
級別1:
.a.b
定義乙個圓角邊框類
.br
級別2：
.br(@a)
.b
級別3
:.br(@a
:50%) .b
.c
定義盒子陰影類
.bs(
@h,@v,@blur,@size,@color)
.box
.bs(
@str,@color)
// @str
: 0px 0px 10px 0px
.bs(0px 0px 10px 0px,red)
box-shadow:@arguments;//實際引數列表 代表上面的5個實參
}.box
.bs(@str,@color)
// @str: 0px 0px 10px 0px
.bs(0px 0px 10px 0px,red)
css彈性盒子
css3 彈性盒子 flexible box 或 flexbox 是一種 用於在頁面上布置元素的 布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。css...
css 彈性盒子
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
CSS 彈性盒子
1.彈性盒子 概念 css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。2.css3 彈性盒子內容 彈性盒...