如何在Flexbox中并排设置两个div的相等宽度？

参考CSS side by side div's auto equal widths，我正在寻求解决同样的问题，只有我使用flexbox并且不希望为我显示的内容使用表格样式。如何在Flexbox中并排设置两个div的相等宽度？

#outer { 
 
    width: 1024px; 
 
    height: 768px; 
 
    
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div id="outer"> 
 
    <div class="inner">Inner HTML content has larger natural width</div> 
 
    
 
    <div class="inner">Inner HTML content has smaller natural width</div> 
 
</div>

所以两列的宽度将与他们的内容伸展但左栏将具有更大的宽度的结果。为了保持两列对称于中心，我需要右栏，它的宽度比左栏的宽度要短，等于左栏。我如何在Flexbox布局中做到这一点？

编辑：我看到许多问题的答案基本上分配一个固定的宽度，以既容器（〜50％）。这不是我要找的。左侧的容器可以随意伸展至内容所需的任何宽度，并受到最大限度的限制，而且不应触及。正确的容器需要扩展其宽度以匹配左侧。

这样做可以不诉诸JavaScript？

来源

2017-06-09 thegreatjedi

@Pete这里是一个没有，虽然一个并不需要为这个Flexbox的：https://jsfiddle.net/rdh61g7c/8/ – LGSon

@LGSon确定我认错但我认为这将是更多的OP是想要的 - 他们需要它在1024框中心：https://jsfiddle.net/rdh61g7c/10 – Pete

为了解决这个问题，需要将右边的设置为绝对值，并使内联显示outer。

为内联，由它的内容，这是离开，其中，作为柔性的项目，也被其内容的大小，以及右不会影响，因为它是定位在outer意志大小绝对的并且被排除在正常流程之外。

然后，只需按权到左末，它会使你确切想要的。

Fiddle demo

栈片断

#outer { 
 
    position: relative; 
 
    height: 300px; 
 
    
 
    display: inline-flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.inner { 
 
    border: 1px solid red; 
 
} 
 
.inner:nth-child(2) { 
 
    position: absolute; 
 
    left: 100%; 
 
    width: 100%; 
 
} 
 

 
/* this is for styling purpose only, and produce a blue border */ 
 
#outer::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    height: 100%; 
 
    width: 200%; 
 
    border: 1px solid blue; 
 
}

<div id="outer"> 
 
    <div class="inner"> 
 
    Inner HTML content has larger natural width than the other 
 
</div> 
 
    
 
    <div class="inner"> 
 
    This has a smaller natural width 
 
    </div> 
 
</div>

如果您还打算始终在视口中中间的2列的中心，你可以这样做这（如果这是你想要的，让我知道，我会解释它是什么）

Fiddle demo 2

来源

2017-06-09 10:26:37 LGSon

嗨，请参阅我的更新问题。我不打算充分填充外部容器。左边的容器宽度可以是任何它选择的，但是正确的容器必须匹配它。 – thegreatjedi

@thegreatjedi我更新了我的答案。这个是那个https://jsfiddle.net/rdh61g7c/15/ ...我的第二个小提琴样本在我的回答中也是这样，但我也让那个绝对中心的右/左项目。 – LGSon

应用柔性设置到.inner元素：

.inner { 
    flex: 1 1 auto; 
}

这是该柔性成长，弹性收缩和Flex-基础设置的简写。

这将确保#outer元素的剩余空间平均分配给所有子元素，无论有多少元素。

请参阅以下文章以获得完整的故障。

CSS Tricks - A Complete Guide to Flexbox

来源

2017-06-09 10:27:17

嗨，请看我对这个问题的更新。我不打算充分填充外部容器。左边的容器宽度可以是任何它选择的，但是正确的容器必须匹配它。 – thegreatjedi

虽然可以使用：

.inner { 
    flex: 1 0 50%; 
    border: 1px solid red; 
}

最简单的解决办法是：

.inner { 
    width: 50%; 
    }

这使的#outer div的50％内<div>的宽度。和50 + 50是100％。

来源

2017-06-09 11:14:50 Deathstorm

嗨，请看我对这个问题的更新。我不打算充分填充外部容器。左边的容器宽度可以是任何它选择的，但是正确的容器必须匹配它。 – thegreatjedi

我会建议在这种情况下不要使用flex，但是使内部的DIVs inline-blocks widht width: 50%。注意：在这种情况下，HTML代码中的DIV之间不存在换行符是非常重要的 - 请参阅下面的示例。

#outer { 
 
    width: 1024px; 
 
    height: 768px; 
 
} 
 

 
.inner { 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    width: 50%; 
 
    border: 1px solid #eee; 
 
}

<div id="outer"> 
 
    <div class="inner">Inner HTML content has larger natural width</div><div 
 
    class="inner">Inner HTML content has smaller natural width</div> 
 
</div>

来源

2017-06-09 16:28:07 Johannes

如何在Flexbox中并排设置两个div的相等宽度？

回答

相关问题