5.7 弹性盒子

弹性盒子
定义弹性盒子 display：flex
定义子元素排列方式 flex-diection
定义子元素换行方式 flxe-wrap
定义子元素对齐方式
横向对齐 justify-content
纵向对齐 align-items

媒体查询 @media screen and (max-width:最大宽度)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{width: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>