- display：指定元素使用弹性盒子布局，属性值为 flex 或 inline-flex。
- flex-direction：指定弹性盒子主轴的方向，属性值可以是 row（默认值，主轴为水平方向）、row-reverse（主轴为水平方向，但从右到左排列）、column（主轴为垂直方向）或 column-reverse（主轴为垂直方向，但从下到上排列）。
- justify-content：指定弹性盒子在主轴上的对齐方式，属性值可以是 flex-start（默认值，从起点对齐）、flex-end（从终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）或 space-around（每个项目两侧的间距相等）。
- align-items：指定弹性盒子在交叉轴上的对齐方式，属性值可以是 flex-start（从起点对齐）、flex-end（从终点对齐）、center（居中对齐）、baseline（基线对齐）或 stretch（默认值，拉伸对齐）。
- flex-wrap：指定弹性盒子是否换行。属性值可以是 nowrap（不换行）、wrap（换行）或 wrap-reverse（反向换行）。
- flex-flow：flex-direction 和 flex-wrap 的缩写。
- align-content：多条轴线的对齐方式。属性值可以是 flex-start、flex-end、center、space-between、space-around 或 stretch（默认值，每条轴线占满整个交叉轴）。
- flex：指定项目的伸缩比例，默认为 0。如果一个项目的 flex 为 2，另一个项目的 flex 为 1，则前者占据的空间是后者的两倍。
- order：指定项目的排列顺序。数值越小，排列越靠前，默认为 0。
flex-direction 属性：
flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。 其语法格式为：
flex-direction: row | row-reverse | column | column-reverse;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .content1 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: row; /*默认值，行对齐，主轴起点与终点相同*/ } .content2 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: row-reverse; /*行对齐，主轴起点与终点相反*/ } .content3 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: column; /*列对齐，主轴起点与终点相同*/ } .content4 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: column-reverse; /*列对齐，主轴起点与终点相反*/ } .box { width: 50px; height: 50px; color: black; } </style> </head> <body> <div class="content1"> <div class="box" style="background-color:#FFE5B9;">A</div> <div class="box" style="background-color:#EFF8FF;">B</div> <div class="box" style="background-color:#C9CBFF;">C</div> </div> <div class="content2"> <div class="box" style="background-color:#FFE5B9;">A</div> <div class="box" style="background-color:#EFF8FF;">B</div> <div class="box" style="background-color:#C9CBFF;">C</div> </div> <div class="content3"> <div class="box" style="background-color:#FFE5B9;">A</div> <div class="box" style="background-color:#EFF8FF;">B</div> <div class="box" style="background-color:#C9CBFF;">C</div> </div> <div class="content4"> <div class="box" style="background-color:#FFE5B9;">A</div> <div class="box" style="background-color:#EFF8FF;">B</div> <div class="box" style="background-color:#C9CBFF;">C</div> </div> </body> </html>
flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。 其语法格式为：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 100px; height: 100px; color: black; } #content { width: 240px; height: 300px; background-color: white; display: flex; flex-wrap: wrap-reverse; } .item1 { background-color: #ffe5b9; } .item2 { background-color: #eff8ff; } .item3 { background-color: #c9cbff; } </style> </head> <body> <div id="content"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> </div> </body> </html>
align-items 属性
align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 其语法格式为：
align-items: flex-start | flex-end | center | baseline | stretch;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 100px; color: black; } #content { width: 240px; height: 300px; background-color: white; display: flex; align-items: stretch; } .item1 { background-color: #ffe5b9; } .item2 { background-color: #eff8ff; } .item3 { background-color: #c9cbff; } </style> </head> <body> <div id="content"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> </div> </body> </html>
align-content 属性的使用
align-content 属性可以用于控制多行的对齐方式，如果只有一行则不会起作用。 其语法格式为：
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 60px; color: black; } #content { width: 300px; height: 300px; background-color: antiquewhite; display: flex; flex-wrap: wrap; align-content: stretch; } .left { background-color: gray; } .center { background-color: silver; } .right { background-color: darkgray; } </style> </head> <body> <div id="content"> <div class="left">div1块</div> <div class="center">div2块</div> <div class="right">div3块</div> <div class="left">div4块</div> <div class="center">div5块</div> <div class="right">div6块</div> <div class="left">div7块</div> <div class="center">div8块</div> <div class="right">div9块</div> <div class="left">div10块</div> <div class="center">div11块</div> <div class="right">div12块</div> </div> </body> </html>
