Question

我有一个父div和两个div。我想为这些子div保留特定的大小（列）。在flexbox中可以吗？我为此感到困惑。

<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
</div>

第一个子项的宽度应为1列，第二个子项的宽度应为2列。在右侧，我希望有1列宽度的空白（因此父div的行为应类似于4列）。

Answer 1

您可以使用flexbox通过使用位于第四列的 pseudo元素来实现此目的：

将flex: 1添加到第一个child和伪元素
将flex: 2添加到第二个child。

请参见下面的演示

.parent {
  display: flex;
  height: 100px;
  border: 1px solid #ddd;
}

.child {
  border: 1px solid cadetblue;
  background: lightblue;
  flex: 1;
}

.child + .child {
  flex: 2;
}

.parent:after {
  content: '';
  flex: 1;
}

<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
 </div>

使用CSS Grid布局更简单的解决方案-建立4列布局，并在两列上第二个child元素 span << / p>

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100px;
  border: 1px solid #ddd;
}

.child {
  border: 1px solid cadetblue;
  background: lightblue;
}

.child + .child {
  grid-column: span 2;
}

<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
 </div>

Answer 2

这是一种使用flex-basis来将弹性项目设置为特定百分比宽度的方法。

在此示例中，两个弹性项目既不能shrink也不能grow。将100％的宽度分成四列，每列需要为父宽度的25％。第一项为25％，第二项为50％（两列宽），在右侧留出25％的空间。

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
}

.child:nth-child(1) {
  flex: 0 0 25%
}

.child:nth-child(2) {
  flex: 0 0 50%;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

编辑

我注意到您希望每列之间都有一些空间。一种方法是在弹性商品上添加一些右边距百分比，然后从每个商品的弹性基础中减去该百分比。

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
  margin-right: 3%;
}

.child:nth-child(1) {
  flex: 0 0 22%;
}

.child:nth-child(2) {
  flex: 0 0 47%;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

如果您不希望列之间的间隔不是百分比，则可以使用calc()计算适当的flex-basis。但是，请注意，在撰写本文时，IE或Edge不支持此功能。

据报道，IE＆Edge不支持'flex'内的calc。（未经较早版本测试）   此示例不起作用：flex：1 1 calc（50％-20px）;
  caniuse.com

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
  margin-right: 0.5em;
}

.child:nth-child(1) {
  flex: 0 0 calc(25% - 0.5em);
}

.child:nth-child(2) {
  flex: 0 0 calc(50% - 0.5em);
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 3

似乎没有人建议您可以设置父级的宽度：

.parent {
 width: 75%;
 display: flex;
}

.child {
  flex: 150;
  height: 2rem;
  border: 1px solid #000;
}

.child:first-child {
 flex: 75;
}

<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
</div>

编辑：

要补充一点，您希望您的第二个孩子是第一个孩子的两倍，所以给第二个孩子一个flex值，该值是您第一个孩子的两倍-我用过1和2，但您可以使用flex: 75和flex: 150来达到相同的效果。

Flexbox一栏宽度的空白空间

3 个答案:

编辑