【新彈性盒】

林堯彬發表於2020-04-04

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: -webkit-flex;
display: flex;
width: 600px;
/*border: 1px solid red;*/
height: 300px;
align-items: center; /* 在父元素裡面設定,上下居中*/
justify-content:space-around; /*定義子元素在橫軸上的排列方式 子(absolute)絕父相(relative)*/
}
.left{
width: 250px;
height: 100px;
/*border: 1px solid red;*/
order: -3;
margin-left: 10px;
}
.center{
height: 200px;
width: 50px;
/*border: 1px solid blue;*/
/*flex-grow: 2;*/
flex-shrink: 0; /*在空間不變的基礎上,其它空間等比例縮小*/
order: 2;
display: flex;/*作為彈性盒子元素的仍然可以設定為彈性盒,控制下面的子元素佈局*/
}
.right{
width: 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>

轉載於:https://www.cnblogs.com/chenhongshuang/p/8823960.html

相關文章