屬性名
說明flex-direction: row || row-reverse || column || column-reverse
主軸方向
justify-content: flex-start || flex-end || center || space-around || space-between
內容在主軸上的對齊方式
flex-wrap: nowrap || wrap
是否換行
flex-flow: ||
flex-direction和justify-content屬性的縮寫
align-items: stretch || flex-start || flex-end || center || baseline
內容在交叉軸上的對齊方式（單行有效）
align-content: stretch || flex-start || flex-end || space-around|| space-between
內容在交叉軸上的對齊方式（多行有效）
屬性名說明
flex: 1 || 2 || 3 || …
專案在剩餘空間上所佔空間的比例
order: … || -1 || 0 || 1 || …
專案在主軸上的排列順序（值越小越靠前）
align-self: auto || flex-start || flex-end || center || baseline || stretch
單個專案在交叉軸上的對齊方式
lang
="ch"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
利用flex布局繪製骰子title
>
>
.container
.box
.point
.box1
.box2
.box3
.box3 div:nth-child(1)
.box3 div:nth-child(3)
.box4
.box44
.point4
.box5
.box55
.box55:nth-child(2n-1)
.box55:nth-child(2)
.point5
.box6
.box66
.point6
style
>
head
>
>
class
="container"
>
class
="box1 box"
>
class
="point"
>
div>
div>
class
="box box2"
>
class
="point"
>
div>
class
="point"
>
div>
div>
class
="box box3"
>
class
="point"
>
div>
class
="point"
>
div>
class
="point"
>
div>
div>
class
="box box4"
>
class
="box44"
>
class
="point4"
>
div>
class
="point4"
>
div>
div>
class
="box44"
>
class
="point4"
>
div>
class
="point4"
>
div>
div>
div>
class
="box box5"
>
class
="box55"
>
class
="point5"
>
div>
class
="point5"
>
div>
div>
class
="box55"
>
class
="point5"
>
div>
div>
class
="box55"
>
class
="point5"
>
div>
class
="point5"
>
div>
div>
div>
class
="box box6"
>
class
="box66"
>
class
="point6"
>
div>
class
="point6"
>
div>
div>
class
="box66"
>
class
="point6"
>
div>
class
="point6"
>
div>
div>
class
="box66"
>
class
="point6"
>
div>
class
="point6"
>
div>
div>
div>
div>
body
>
html
>
Flex布局屬性學習整理
a.使用在容器上的六大屬性值 1.flex direction 2.flex wrap 3.flex flow 4.justify content 5.align items 6.align content 1.flex direction屬性決定主軸的方向，即專案的排列方式 有四個值可供選擇 ro...
關於Flex布局屬性詳解
一 flex布局是什麼？flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box 行內元素也可以使用flex布局。box webkit核心的瀏覽器，必須加上 webkit字首。box 注意，設為flex布局以後，子元素的f...
flex彈性布局屬性詳解！
詳細看下flex彈性布局具體屬性 flex容器屬性詳解 flex direction row column 橫排 豎排 決定元素的排列方向 flex wrap nowrap wrap wrap reverse 翻轉 排列不下時如何排，預設排不下就壓縮進行排 flex flow是 flex direc...