标签：body children 查询 ems 弹性盒 lex 宽度 最大 otto
弹性盒子
定义弹性盒子 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>
标签：body children 查询 ems 弹性盒 lex 宽度 最大 otto
原文地址：https://www.cnblogs.com/sunhao1987/p/9004054.html
