当前位置：首页 > news >正文

flex布局项目属性

news 来源：原创 2025/6/20 8:02:35

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