Flexbox div不占用整个宽度 [英] Flexbox div doesn't take the whole width

问题描述

我试图理解 display：flex 是如何工作的，但是每当我设置它时，孩子都不会占据整个宽度。我期待三个div获得屏幕宽度的33％。我做错了什么？

.flexbox {display：flex;}。 flexbox div {border：1px纯黑色; padding：10px;}

 < div class =flexbox > < DIV  - 酮< / DIV> < DIV>二< / DIV> < div>三< / div>< / div>  

>解决方案

您需要告诉flex项目展开。默认情况下，它们不占用可用空间。

flex-basis 的初始设置为 auto ，这意味着物品会占用其内容的大小。

初始设置 flex-grow 是 0 ，这意味着物品不会跨越可用空间。

将 flex：1 添加到您的项目中，相当于： flex：1 1 0 ，这是：
$ b

• flex-grow：1


• flex-shrink：1


• flex-basis：0 。

  .flexbox {display：flex; } .flexbox div {flex：1; / * new * / border：1px纯黑色; padding：10px;}  

 < div class =flexbox > < DIV  - 酮< / DIV> < DIV>二< / DIV> < div>三< / div>< / div>  

I'm trying to understand how display:flex works, but whenever I set it, the childs don't take the whole width. I was expecting the three divs getting a 33% of the screen width. What am I doing wrong?

.flexbox {
  display: flex;
}

.flexbox div {
  border: 1px solid black;
  padding: 10px;
}

<div class="flexbox">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

解决方案

You need to tell flex items to expand. They don't consume free space by default.

The initial setting of flex-basis is auto, which means that items take the size of their content.

The initial setting of flex-grow is 0, which means that items won't grow across available space.

Add flex: 1 to your items, which is equivalent to: flex: 1 1 0, which is the shorthand for:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0.

.flexbox {
  display: flex;
}

.flexbox div {
  flex: 1;  /* new */
  border: 1px solid black;
  padding: 10px;
}

<div class="flexbox">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

这篇关于Flexbox div不占用整个宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！