伸縮佈局
阿新 • • 發佈：2019-01-06
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 900px;
height: 600px;
border: 1px solid red;
box-sizing: border-box;
margin:0 auto;
/*設定父容器為盒子：會使每一個子元素自動變成伸縮項
當子元素的寬度和大於父容器寬度的時候，子元素會自動平均收縮*/
display: flex;
/*設定子元素的主軸方向上的排列方式*/
justify-content: space-around;
/*flex-flow:是flex-wrap和flex-direction的綜合
flex-wrap:控制子元素是否換行顯示，預設不換行
nowrap:不換行--則收縮
wrap:換行
wrap-reverse:翻轉，原來是從上到下，翻轉後就是從下到上來排列*/
/*flex-wrap: wrap;*/
/*flex-direction：設定子元素的排列方向：就是用來主軸方向，預設主軸方向是row(水平方向)
row:水平排列方向，從左到右
row-reverse:水平排列方向，從右到左
column:垂直排列方向，從上到下
column-reverse：垂直排列方向，從下到上*/
/*flex-direction: column-reverse;*/
flex-flow: row wrap;
/*align-items:設定子元素(伸縮項)在側軸方向上的對齊方式
center:設定在側軸方向上居中對齊
flex-start:設定在側軸方向上頂對齊
flex:end:設定在側軸方向上底對齊
stretch:拉伸：讓子元素在側軸方向上進行拉伸，填充滿整個側軸方向>> 預設值
baseline:文字基線*/
align-items: center;
}
.first{
width: 200px;
height: 200px;
background-color: red;
/*flex是用來設定當前伸縮子項佔據剩餘空間的比例值*/
flex: 1;
}
.second{
width: 200px;
height: 200px;
background-color: green;
flex: 3;
}
.third{
width: 200px;
height: 200px;
background-color: blue;
}
.fourth{
width: 200px;
height: 200px;
background-color: pink;
}
.fifth{
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
<div class="fifth">5</div>
</div>