弹性盒子
定义弹性盒子 display：flex
定义子元素排列方式 flex-diection
定义子元素换行方式 flxe-wrap
定义子元素对齐方式
横向对齐 justify-content
纵向对齐 align-items
媒体查询 @media screen and (max-最大宽度)and （min-width：最小宽度）
line-height与vertical-align
line-height 主要作为调节文本的垂直对齐方式，通过设置行高的大小
vertical-align 主要作为调节行内元素（span/img）的垂直对齐方式 top bottom middle text-top text-bottom
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #parent{ 800px; height: 400px; border:1px solid black; /*定义父元素为弹性盒子*/ display:flex; /*规定子元素的排列方式*/ flex-direction: row-reverse; /*规定换行方式*/ flex-wrap: nowrap; /*子元素在父元素的横向对齐方式*/ justify-content: space-between; /*子元素在父元素的纵向对齐方式*/ align-items:stretch ; } .children{ width :170px; height: 180px; border: 1px solid red; float:left ; flex: 1; align-self: flex-start; } .children1{border: 1px solid red; flex:3; order: 0;} </style> </head> <body> <div id="parent"> <div class="children">1</div> <div class="children">2</div> <div class="children">3</div> <div class="children">4</div> <div class="children">5</div> <div class="children">6</div> <div class="children1">7</div> <div class="children">8</div> </div> </body> </html>