当前位置：网站首页>Multi row and multi column flex layout

Multi row and multi column flex layout

2022-07-07 12:30:00 【Xiaoding Chong duck!】

1、 Three lines and three columns , Margins are all 20px, Every box Width and height are 200px

Use flex Layout , Set the width and height of the outer box to 640px(200*3+20*2), In the use of align-content: space-between and justify-content: space-between that will do , The code is as follows ：

<style>
 *{
    padding:0;
    margin: 0;
  }
  html,body{
    width: 100%;
    height: 100%;
  }
  .box{
    width: 640px;
    background: rgb(243, 171, 171);
    height: 640px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
  }
  .Abox{
    background: yellow;
    width: 200px;
    height: 200px;
  }
</style>
<body>
    <div class="box">
      <div class="Abox">1</div>
      <div class="Abox">2</div>
      <div class="Abox">3</div>
      <div class="Abox">4</div>
      <div class="Abox">5</div>
      <div class="Abox">6</div>
      <div class="Abox">7</div>
      <div class="Abox">8</div>
      <div class="Abox">9</div>
    </div>
</body>

2、 Multiple rows and three columns , Margins are all 20px, Every box Width and height are 200px, Highly adaptive content

Or use align-content: space-between and justify-content: space-between, Height has js calculated , In setting up to dom On ：

<style>
 *{
    padding:0;
    margin: 0;
  }
  html,body{
    width: 100%;
    height: 100%;
  }
  .box{
    width: 640px;
    background: rgb(243, 171, 171);
    /* height: 640px; */
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
  }
  .Abox{
    background: yellow;
    width: 200px;
    height: 200px;
  }
</style>
<body>
    <div class="box">
      <div class="Abox">1</div>
      <div class="Abox">2</div>
      <div class="Abox">3</div>
      <div class="Abox">4</div>
      <div class="Abox">5</div>
      <div class="Abox">6</div>
      <div class="Abox">7</div>
      <div class="Abox">8</div>
      <div class="Abox">9</div>
      <div class="Abox">10</div>
      <div class="Abox">11</div>
      <div class="Abox">12</div>
    </div>
</body>
<script>
  let parentDom = document.querySelector('.box');
  let children = parentDom.children;
  let rowNums = Math.ceil(children.length / 3);
  parentDom.style.height = rowNums * 200 + (rowNums - 1) * 20 + 'px';
</script>

3、 Three rows and many columns , Margins are all 20px, Every box Width and height are 200px, Width adaptive content

Law 1 ：

Or use align-content: space-between and justify-content: space-between, At this time, the width is determined by the content , So you can go through js Calculate and dynamically set the width ：

<style>
 *{
    padding:0;
    margin: 0;
  }
  html,body{
    width: 100%;
    height: 100%;
  }
  .box{
    background: rgb(243, 171, 171);
    height: 640px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
  }
  .Abox{
    background: yellow;
    width: 200px;
    height: 200px;
  }
</style>
<body>
    <div class="box">
      <div class="Abox">1</div>
      <div class="Abox">2</div>
      <div class="Abox">3</div>
      <div class="Abox">4</div>
      <div class="Abox">5</div>
      <div class="Abox">6</div>
      <div class="Abox">7</div>
      <div class="Abox">8</div>
      <div class="Abox">9</div>
      <div class="Abox">10</div>
      <div class="Abox">11</div>
      <div class="Abox">12</div>
    </div>
</body>
<script>
  let parentDom = document.querySelector('.box');
  let children = parentDom.children;
  let columnNums = Math.ceil(children.length / 3);
  parentDom.style.width = columnNums * 200 + (columnNums - 1) * 20 + 'px';
</script>

Law two ：

Spindle use justify-content: space-between, Cross axis use align-content: flex-start, At this time, there is margin control , Don't use js Control the width of the parent box ,width Set to fit-content：

The effect is as follows , At this time, the width of the parent box is only the width of a list of child elements , I have encountered this problem before , Namely flex-direction: column when , The width of multiple columns of child elements cannot expand the width of parent elements , Therefore, this plan cannot .

4、 Three lines and three columns , Margins are all 20px, Every box Width and height are 200px, Highly adaptive content , Child elements cannot be covered

The method of question two is used , If you find that the last line is less than three, there will be a space in the middle , It's not the effect we want ：

Law 1 ：

Use not shown div fill , To carry on the placeholder ：

<style>
  *{
     padding:0;
     margin: 0;
   }
   html,body{
     width: 100%;
     height: 100%;
   }
   .box{
     width: 640px;
     height: 640px;
     background: rgb(243, 171, 171);
     display: flex;
     flex-wrap: wrap;
     align-content: space-between;
     justify-content: space-between;
   }
   .Abox{
     background: yellow;
     width: 200px;
     height: 200px;
   }
 </style>
 <body>
     <div class="box">
       <div class="Abox">1</div>
       <div class="Abox">2</div>
       <div class="Abox">3</div>
       <div class="Abox">4</div>
       <div class="Abox">5</div>
       <div class="Abox">6</div>
       <div class="Abox">7</div>
       <div class="Abox">8</div>
     </div>
 </body>
 <script>
   let parentDom = document.querySelector('.box');
   let children = parentDom.children;
   let n = children.length % 3;
   //  Don't cover 
   if (n) {
      while (3 - n > 0) {
        let div = document.createElement('div');
        div.className = 'Abox';
        div.style.visibility = 'hidden';
        parentDom.appendChild(div);
        n++;
      }
   }
 </script>

The effect is as follows ： 

Law two ：

Spindle use justify-content: flex-start, Cross axis use align-content: space-between, The right margin is margin Set up , The last column nth-child(3n) Do not set the right margin ：

<style>
  *{
     padding:0;
     margin: 0;
   }
   html,body{
     width: 100%;
     height: 100%;
   }
   .box{
     width: 640px;
     background: rgb(243, 171, 171);
     height: 640px;
     display: flex;
     flex-wrap: wrap;
     align-content: space-between;
     justify-content: flex-start;
   }
   .Abox{
     background: yellow;
     width: 200px;
     height: 200px;
     margin-right: 20px;
   }
   .Abox:nth-child(3n) {
      margin: 0;
   }
 </style>
 <body>
     <div class="box">
       <div class="Abox">1</div>
       <div class="Abox">2</div>
       <div class="Abox">3</div>
       <div class="Abox">4</div>
       <div class="Abox">5</div>
       <div class="Abox">6</div>
       <div class="Abox">7</div>
       <div class="Abox">8</div>
     </div>
 </body>

in addition , above 1、2、3 These situations that can be covered can also be realized by using the method of two .

原网站

版权声明
本文为[Xiaoding Chong duck!]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202130617454400.html

边栏推荐

猜你喜欢

随机推荐