<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: -webkit-flex;
display: flex;
600px;
/*border: 1px solid red;*/
height: 300px;
align-items: center; /* 在父元素里面设置,上下居中*/
justify-content:space-around; /*定义子元素在横轴上的排列方式 子(absolute)绝父相(relative)*/
}
.left{
250px;
height: 100px;
/*border: 1px solid red;*/
order: -3;
margin-left: 10px;
}
.center{
height: 200px;
50px;
/*border: 1px solid blue;*/
/*flex-grow: 2;*/
flex-shrink: 0; /*在空间不变的基础上,其它空间等比例缩小*/
order: 2;
display: flex;/*作为弹性盒子元素的仍然可以设置为弹性盒,控制下面的子元素布局*/
}
.right{
250px;
height: 100px;
border: 1px solid red;
/*flex-grow: 1; /*分配剩余空间*/
align-self: flex-start; /*设置当前子元素上中下排列顺序*/
order: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="left">1</div>
<div class="center">
<!--<ul>
<li>子1</li>
<li>子2</li>
</ul>
<ul>
<li>子3</li>
<li>子4</li>
</ul>-->
</div>
<div class="right">3</div>
</div>
</body>
</html>