lang
="en"
>
>
charset
="utf-8"
>
>
標題title
>
rel=
"stylesheet"
href
="../css/reset.css"
>
type
="text/css"
>
.box
.zxw
style
>
head
>
>
class
="box"
>
class
="zxw"
>
zxw1li
>
class
="zxw"
>
zxw2li
>
class
="zxw"
>
zxw3li
>
ul>
body
>
html
>
flex-direction:row | column | row-reverse | column-reverse;：定義彈性元素排列方向及順序
flex-wrap: nowrap | wrap | wrap-reverse;：定義是否換行，換行方式都是交叉軸方向
justify-content: flex-start | flex-end | center | space-between | space-around;：子元素在主軸方向上的對齊方式
align-items: flex-start | flex-end | center | baseline | stretch;：子元素在交叉軸方向上的對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around | stretch;：多行子元素在交叉軸方向上的對齊方式
order：預設值0
flex-grow:0：預設值為0；設定彈性元素的擴充套件比率來分配剩餘空間
flex-shrink:1：預設值為1；設定彈性元素的收縮比率來收縮空間
max-width：定義元素最大寬度
該屬性值會對元素的寬度設定乙個最大限制。因此，元素可以比指定值窄，但不能比其寬。不允許指定負值
min-width：定義元素最小寬度
該屬性值會對元素的寬度設定乙個最小限制。因此，元素可以比指定值寬，但不能比其窄。不允許指定負值
max-height：定義元素最大高度
該屬性值會對元素的高度設定乙個最大限制。因此，元素可以比指定值矮，但不能比其高。不允許指定負值
min-height：定義元素最小高度
該屬性值會對元素的高度設定乙個最小限制。因此，元素可以比指定值高，但不能比其矮。不允許指定負值
css3新增的彈性盒子模型
box align start end center baseline stretch start 定義每個子元素沿盒子的上邊緣排列，餘下的空間位於底部 end 定義每個子元素沿盒子的下邊緣排列，餘下的空間位於頂部 center 定義可用空間平均分配，上面一半，下面一半 baseline 定義子元素...
CSS3 彈性盒子模型的使用
指定乙個容器的 display 屬性為 flex 彈性布局 inline flex 為行內元素設定 webkit flex 為 webkit 核心瀏覽器元素設定 注意 設為 flex 布局以後，子元素的float clear和vertical align屬性將失效。屬性包括 1 flex 容器屬性 ...
CSS 3 盒子模型
盒子模型解釋 元素在頁面中顯示成乙個方塊，類似乙個盒子，css盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下 把元素叫做盒子，設定對應的樣式分別為 盒子的寬度 width 盒子的高度 height 盒子的邊框 border 盒子內的內容和邊框之間的間距 paddi...