<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局 项目属性</title>
<link href="css/k.css" rel="stylesheet" />
</head>
<body>
<div class="bigbox">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>
css
*{
margin: 0;
padding:0;
}
.bigbox{
width: 1200рx;
height: 800рх;
border: 1px solid red;
margin: auto;
display: flex;/*flex容器**/
/*justify-content: space-between;*/
}
.bigbox div{
width: 200px;
height: 300рх;
border: 1px solid firebrick;
font-size: 32px;
text-align: center;
line-height: 300рх;
flex-grow:1 ;
flex-shrink: 0;
}
.bigbox .box3{
/*给项目顺序：值越小越靠前，取整数，默认值为0，可以为负数*/
order: -1;
/*
项目存在剩余空间时的放大比例：
0：默认值，不放大
1：等比例放大
n：单独一个项目设置时
*/
flex-grow: 0;
/*项目缩小比例：
默认值为1，表示平分缩小空间
0：表示不缩小
不能为负数
*/
flex-shrink: 0;
flex-basis:300px;
}
.bigbox .box1{
order:2 ;
}
.bigbox .box2{
align-self: center;
}