網頁布局是css的乙個重點應用。
我們傳統的布局的解決方案是基於盒裝模型，依賴display屬性+position屬性+float屬性。而這種布局相對來說不是很方便，類似垂直居中就不容易實現。
2023年，w3c提出了一種新的方案----flex布局，可以簡便、完整、響應式地實現各種瀏覽器的支援，這就意味著，現在能很安全的使用這項功能。
做出來的效果就是這樣的
那麼我們該如何用彈性布局來實現呢
首先我們要了解彈性盒子使用流程
首先我們要定義乙個彈性盒子
display：flex；flex-direction：row/column(reverse);
/*row橫軸方向預設方向 column豎軸方向*/
justify-content: flex-start;
/* 左對齊 */
justify-content: flex-end;
/* 右對齊 */
justify-content: center;
/* 居中對齊 */
justify-content: space-around;
/* 兩端對齊，兩端有間距 */
justify-content: space-between;
/* 兩端對齊，兩端無間距 */
align-items: flex-end;
align-items: flex-start;
align-items: center;
align-self: flex-end;
align-self: flex-start;
align-self: center;
align-content: flex-end;
align-content: flex-start;
align-content: center;
/* flex-end側軸右對齊
flex-start側軸左對齊
center側軸中間對齊*/
align-content對於單行的的盒子不起任何作用，而align-items則不區分單行與多行。
align-items是乙個彈性容器，而align-self則是乙個彈性專案。
大概就是align-items控制內部專案，而align-self則是控制自身專案
超出換行
flex-wrap: wrap;
/*超出換行*/
我們先寫出骰子大致框架定義盒子寬高，骰子大小，陰影效果
我這邊用的列表寫的
ul
li
ul:nth-child(2)
ul:nth-child(3)
ul:nth-child(3) li:nth-child(2)
ul:nth-child(4)
ul:nth-child(4) li:nth-child(2)
ul:nth-child(4) li:nth-child(3)
ul:nth-child(5)
ul:nth-child(5) li:nth-child(3)
ul:nth-child(5) li:nth-child(4)
ul:nth-child(6)
ul:nth-child(6) li:nth-child(3)
ul:nth-child(7)
骰子就出來了
附帶完整**
我是引入外部檔案
@charset "utf-8";
*h1,h2,h3,h4,h5,h6ali
imghtml
ul
liul:nth-child(2)
ul:nth-child(3)
ul:nth-child(3) li:nth-child(2)
ul:nth-child(4)
ul:nth-child(4) li:nth-child(2)
ul:nth-child(4) li:nth-child(3)
ul:nth-child(5)
ul:nth-child(5) li:nth-child(3)
ul:nth-child(5) li:nth-child(4)
ul:nth-child(6)
ul:nth-child(6) li:nth-child(3)
ul:nth-child(7)
flex彈性盒子
垂直居中 傳統 絕對定位 flex flexible box 彈性盒子。可以輕鬆控制元素的排列，對齊和順序。宣告定義 使用display flex或display inline flex 宣告乙個容器為彈性盒子。這個容器中的子元素們，會遵循彈性布局。注 一般是使用display flex.inlin...
彈性盒子 flex
flex 彈性盒 伸縮盒 是css中的又一種布局手段，它主要用來代替浮動來完成頁面的布局 flex可以使元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變 要使用彈性盒，必須先將乙個元素設定為彈性容器 我們通過display來設定彈性容器 思維導圖 flex direction 指定容器中彈性元素的...
flex彈性盒子
1.設為flex布局之後，子元素的float，clear和vertical align屬性都講失效 2.採用flex布局的元素，稱為flex容器 flex container 所有的子元素成為容器成員，稱為flex專案 flex item 3.容器預設存在兩根軸 水平的主軸和垂直的交叉軸 4.主軸的...