目录
1.display:flex; --------- 弹性盒子
2.flex-direction
3.flex-wrap
4.flex-flow
5.align-items
?6.align-content
?7.justify-content
?8.扩展
1.display:flex; --------- 弹性盒子 主要的属性： flex-direction: 弹性盒子中子元素的排列方式 flex-wrap: 设置子元素超过父元素后是否自动换行 flex-flow:flex-direction 和 flex-wrap 的简写 align-items ：设置弹性盒子在侧轴（纵轴）上的对齐方式 align-content: 对 flex-wrap 的一个修改，和 align-items 相似，但不是设置对齐方式 justify-content: 设置弹性盒子在横轴（主轴）上的对齐方式 2.flex-direction
取值：row------------------------默认值，作为一行，水平地显示弹性项目
? ? ? ? ? row-reverse-------------等同row，但方向与其相反
? ? ? ? ? column-------------------作为列，垂直地显示弹性项目
? ? ? ? ??column-reverse--------等同column，但方向与其相反
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <title>弹性盒子</title> <style type="text/css"> .flex-container{ width: 400px; height: 250px; background-color: lightgrey; display: flex; flex-direction:column-reverse; } .flex-item{ width: 100px; height: 100px; background-color: red; margin: 10px; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">弹性盒子1</div> <div class="flex-item">弹性盒子2</div> <div class="flex-item">弹性盒子3</div> </div> </body> </html> 3.flex-wrap取值：nowrap-----------默认值，规定弹性项目不会换行
? ? ? ? ? ?wrap---------------规定弹性项目会在需要时换行
? ? ? ? ? wrap-reverse-----规定弹性项目会在需要时换行，但与wrap方向相反
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <title>弹性盒子</title> <style type="text/css"> .flex-container{ width: 400px; height: 250px; background-color: lightgrey; display: flex; flex-wrap:wrap-reverse;} .flex-item{ width: 100px; height: 100px; background-color: red; margin: 10px; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">弹性盒子1</div> <div class="flex-item">弹性盒子2</div> <div class="flex-item">弹性盒子3</div> <div class="flex-item">弹性盒子4</div> <div class="flex-item">弹性盒子5</div> <div class="flex-item">弹性盒子6</div> <div class="flex-item">弹性盒子7</div> <div class="flex-item">弹性盒子8</div> <div class="flex-item">弹性盒子9</div> </div> </body> </html> 4.flex-flow <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <title>弹性盒子</title> <style type="text/css"> .flex-container{ width: 400px; height: 250px; background-color: lightgrey; display: flex; flex-flow:row-reverse wrap; } .flex-item{ width: 100px; height: 100px; background-color: red; margin: 10px; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">弹性盒子1</div> <div class="flex-item">弹性盒子2</div> <div class="flex-item">弹性盒子3</div> <div class="flex-item">弹性盒子4</div> <div class="flex-item">弹性盒子5</div> <div class="flex-item">弹性盒子6</div> <div class="flex-item">弹性盒子7</div> <div class="flex-item">弹性盒子8</div> <div class="flex-item">弹性盒子9</div> </div> </body> </html> 5.align-items ?6.align-content ?7.justify-content ?8.扩展 order------ 可以改变子元素的顺序 flex - grow : 规定在相同的容器中，项目相对于其余弹性项目的增长量 flex-shrink : 固定在相同的容器中，项目相对于其余弹性项目的收缩量 flex-basis : 规定弹性项目的初始长度 flex:flex - grow 、 flex-shrink 、 flex-basis align-self ：指定弹性容器内所选项目的对齐方式
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #CSS3弹性盒子 #目录1displayflex #flexflow
