<!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;
}
?
