flex比例、顺序分配

最新推荐文章于 2024-04-29 11:29:04 发布

盏茶作酒

最新推荐文章于 2024-04-29 11:29:04 发布

阅读量7.1k

点赞数 1

分类专栏： flex比例、顺序分配文章标签： flex比例、顺序分配

本文链接：https://blog.csdn.net/qq_40999917/article/details/79932251

版权

flex比例、顺序分配专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       *{
           padding:0;
           margin:0;
       }
       /*flex里的项目是不脱离文档流的*/
       #hd{
          width:80%;
          border:4px solid orangered;
          height:500px;
          /*指定容器里的项目为弹性布局*/
          display: flex;
          /*flex-wrap:wrap;*/

       }
       #hd>div{
          width:180px;
          height:200px;
          background:dodgerblue;
          border:1px solid purple;
           font-size:30px;
           color:#fff;
           text-align:center;
           /*比例分配1*/
           flex: 1;
       }
       #hd>div:nth-child(3){
          /*比例分配两倍*/
          flex: 2;
       }
   </style>
</head>
<body>
   
   
   <div id="hd">
       <div>1</div>
       
       <div style="order:10">2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
   </div>
</body>
</html>