flex彈性盒子，2023年由w3c的大佬提出，輕鬆的實現web布局方式，並且在pc端也能很好的實現縮放。他取代了之前的 「display+float+position」的布局形式。
今天就介紹介幾個有彈性盒子實現的小案例：
這裡為了看到效果新增了js部分
1.固定底部內容
當內容不足瀏覽器高度時，底部內容要固定在瀏覽器底部，內容超出瀏覽器時底部內容要往後推移。之前要實現這一效果需要通過js來獲取瀏覽器高度進行運算來實現。
html部分
class
=>
class
="head"
>
>
頭部內容h1
>
div>
class
="content"
>
div>
class
="bottom"
>
>
底部內容h1
>
div>
div>
css部分
.head .bottom
.content
.bottom
h1js部分
var height =0;
document.
getelementsbyclassname
("head")[
0].onclick
=function()
px`;
}
2.ul li 列表
class
="list"
>
>
1li>
>
2li>
>
3li>
>
4li>
>
5li>
>
6li>
>
7li>
>
8li>
>
9li>
>
10li
>
ul>
.list
.list li
.list li:hover
輕輕鬆鬆試寫出乙個ul列表，無論怎麼改變大小列表都會保持原樣。
3.水平摺疊容器
html部分
"container"
class
="horizontal-container"
>
class
="fixed-size"
>
1div
>
class
="fixed-size"
>
2div
>
class
="fixed-size"
>
3div
>
div>
"increase-size"
>
增加button
>
"decrease-size"
>
減少button
>
css部分
.horizontal-container
var width =document.
getelementbyid
('increase-size').
onclick
=function()
document.
getelementbyid
('decrease-size').
onclick
=function()
效果
對flex的理解
參考 wxk 前端開發 flex 1等價於 flex grow 1 flex shrink 1 flex basis 0 對於flex grow 預設為0 即就算有多餘空間 也不擴張 對於flex shrink預設為1即有多餘空間 縮小 flex basis預設為auto 在沒有分配多餘空間之前 自...
flex布局的使用
記錄一下flex常用的屬性 caniuse.com可以查詢css屬性的相容情況。content box 總寬度 width padding2 margin2 border2 border box 總寬度 width margin2 父級盒子新增 display flex 使用flex布局之後，子元素...
flex的樣式使用
元素與主軸的對齊方式 定義flex容器 display flex 設定容器內部元素的排列方向 row 定義排列方向，從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 flex direction row reverse nowrap 不換行 ...