Flexbox div不占据整个宽度

Question

Flexbox div不占据整个宽度

4

我正在尝试理解display:flex是如何工作的，但每当我设置它时，子元素不会占据整个宽度。我希望三个

各占屏幕宽度的33％。我做错了什么？

.flexbox {
  display: flex;
}

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

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

- Rafael López Martínez

1

你需要在内部的div中添加 flex: 1;。 - Ravenous

2个回答

1

这里是你需要的：

<html>
    <head>
        <style>

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

        </style>
    </head>
    <body>
        <div class="flexbox">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
        </div>
    </body>
</html>

为了使子元素增长，您需要向它们中的一个添加flex属性。这是一篇关于flexbox的好文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

- vlio20

抱歉，有点晚了。 - vlio20

1

你会习惯的 ;) 和Michael_B一起，你总是会晚一步在flex方面的事情上 :p - Temani Afif

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

你需要告诉flex项目进行扩展，因为它们默认不会占用自由空间。

flex-basis的初始设置是auto，这意味着项目将采用其内容的大小。

flex-grow的初始设置为0，这意味着项目不会跨越可用空间进行扩展。

将flex: 1添加到你的项目中，相当于：flex: 1 1 0，这是以下缩写的简写：

- 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>