Flex盒子,1件物品的尺寸是其他物品的两倍,但仍然像网格系统一样保持内联

Question

我有一个flexbox布局,所有项目都是相同的大小,除了宽度是其他项目宽度的两倍,但高度相同.

我现在面临的问题是,flexbox项的顶行没有与flexbox中的其余行排成一行,这些行都包含相同宽度的项.

我在这里提出了一个问题:http://jsfiddle.net/4e8c0w9z/

不知道是否可以这样做？我正在研究网格系统,但它们似乎都在每个网格固定数量的列上工作,并带有断点.而不是一个flexbox允许每行任意数量的项目.

Answer 1

我觉得你在这里有一点数学问题.你.box2不是两倍大.box.即使您使用,如果您希望间隙正确排列,box-sizing: border-box;也必须牢记margin项目中的项目.以下是当您将宽度设置.box2为180px(150 + 15 + 15)时所发生的事情的演示

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
}
.wrapper {
    display:flex;
    flex-direction:row;
    
    flex-wrap: wrap;
}
.box {
    width: 75px;
    height: 100px;
    background: white;
    margin: 15px;
    
}

.box2 {
    width: 180px;
    height: 100px;
    background: white;
    margin: 15px;
}

<div class="wrapper">
  <div class="box2"></div>
  <!--THIS IS THE 2 width box-->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<!--wrapper-->

这是@JoshBurgess的一点点补充,让它更加flex柔和.使用此功能,您不需要设置特定的宽度,而是使用flex-basis property.

body {
    box-sizing: border-box;
    height:100%;
    background: #336633;
}
.wrapper {
    display:flex;
    flex-direction:row;
    
    flex-wrap: wrap;
}
.box {
    flex: 0 1 75px;
    height: 100px;
    background: white;
    margin: 15px;
    
}

.box2 {
    flex: 0 1 180px;
    height: 100px;
    background: white;
    margin: 15px;
}

<div class="wrapper">
  <div class="box2"></div>
  <!--THIS IS THE 2 width box-->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<!--wrapper-->