使用 FlexBox（或其他 css），是不是可以在每行中有不同数量的相同大小的列（即不使用空 div）？

Posted 2023-03-05

【中文标题】使用 FlexBox（或其他 css），是不是可以在每行中有不同数量的相同大小的列（即不使用空 div）？

【英文标题】：Using FlexBox (or other css), is it possible to have different numbers of equally sized columns in each row (ie. without using an empty div)?使用 FlexBox（或其他 css），是否可以在每行中有不同数量的相同大小的列（即不使用空 div）？

【发布时间】：2018-12-31 08:51:17

【问题描述】：

我正在寻找一个 2 行的网格 - 第 1 行有 2 列，第 2 行有 3 列，其中每列/行（即网格中的项目）大小相同。它使用空 div 工作，但显然这不是首选解决方案....

我已经包含了一些基本的示例 html / css 来说明我的意思，但我想在不使用空 div 的情况下实现这样的目标......

CSS

html, body 
  height: 100%;
  margin: 0;


.grid 
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;


.grid > div 
  display: flex; 
  flex-basis: calc(33.33% - 14px);  
  justify-content: center;
  flex-direction: column;


.grid > div > div 
  display: flex;
  justify-content: center;
  flex-direction: row;


.box  margin: 10px 0 10px 10px
.box1  background-color: red; 
.box2  background-color: orange; 
.box3  background-color: blue; 
.box4  background-color: grey; 
.box5  background-color: purple; 

HTML

<div class="grid">
  <div class="box box1">
    <div>
      one
    </div>
    <div>
      example content
    </div>    
  </div>
 <div class="box box2">
   <div>
     two
   </div>
   <div>
     example content
   </div> 
 </div>
 <div></div>
 <div class="box box3">
   <div>
     three
   </div> 
 </div>
 <div class="box box4">
   <div>
     four
   </div> 
 </div>
 <div class="box box5">
   <div>
     five
   </div> 
 </div>

【问题讨论】：

***.com/questions/36004926/… 这表明使用 flexbox 是不可能的，但使用 css 网格是可能的

是的，我还没有找到使用 flexbox 的方法，但是下面 @Fr33d0m 的解决方案可以在没有任何空 div 的情况下获得输出……使用引导程序也可以，但我只是真的想让它工作使用弹性框...

【参考方案1】：

前面有空格

*
  margin: 0;
  padding: 0;
  box-sizing: border-box;

.container
  width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 1px;

.container > div
  background-color: orangered;
  height: 50px;

.box1
  grid-column: 2 / 3;

<div class="container">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
<div class="box4">box 4</div>
<div class="box5">box5</div>
</div>

后面有空格

*
  margin: 0;
  padding: 0;
  box-sizing: border-box;

.container
  width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 1px;

.container > div
  background-color: orangered;
  height: 50px;

.box3
  grid-column: 1 / 2;

<div class="container">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
<div class="box4">box 4</div>
<div class="box5">box5</div>
</div>