<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局:伸缩盒子flex</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 900px;
height: 600px;
border: 1px solid red;
box-sizing: border-box;
margin: 0 auto;
/* 设置父容器为伸缩盒子,让每个子元素自动变成伸缩项
当子元素的宽度和>父容器宽度,子元素会自动平均收缩。
*/
display: flex;
/* 设置子元素的主轴方向的排列方式:调整内容
flex-start:从左到右排列
flex-end:从父容器右边到左边
center:让子元素从父元素的中间位置开始排列
space-between:左右与父容器的左右对齐,中间产生同等的间距
space-around:将多余的空间,平均的分在每个子元素的两边,类似magin + auto
*/
justify-content: space-around;
/* 是flex-warp和flex-direction的综合
flex-warp:控制子元素是否换行显示,默认不换行
nowarp:不换行--收缩
warp:换行--不收缩
warp-reverse:翻转,原来从上到下,反转后从下到上排列。
*/
flex-flow: wrap;
/* flex-direction:设置子元素的排列方向:就是主轴方向,默认主轴方向是row
row:水平排列方向,方向从左到右。
row-reverse:水平排列方向,从右到左
column:垂直排列方向,从上到下
column-reverse:垂直排列方向,从下到上。
*/
flex-direction: column;
}
.first {
width: 200px;
height: 200px;
background-color: red;
}
.second {
width: 200px;
height: 200px;
background-color: yellow;
}
.third {
width: 200px;
height: 200px;
background-color: green;
}
.fourth {
width: 200px;
height: 200px;
background-color: blue;
}
.fifth {
width: 200px;
height: 200px;
background-color: pink;
}
</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>
</body>
</html>