如何给弹性项目相等的宽度？

Question

我希望第一个和最后一个元素具有相同的宽度。怎么做？

main {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

input {
  width: 200px;
}

<main>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div>
    <input type="text">
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  </div>
</main>

JSFiddle：https://jsfiddle.net/7nz07sqn/9/

Answer 1

将flex: 0 0 auto放在中间 div（这样它占据的宽度与其内容一样多）和flex: 1对于另外两个divs（为了说明添加borders）

请注意，此解决方案假设 中间 div 具有固定宽度（您已将 input 一个固定的 width) - 请参见下面的演示：

main {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

input {
  width: 200px;
}
main > div {
  border: 1px solid;
}
main div:first-child, main div:last-child {
  flex: 1;
}

main div:nth-child(2) {
  flex: 0 0 auto;
}

<main>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  </div>
  <div>
    <input type="text">
  </div>
  <div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,

  </div>
</main>

Answer 2

要使第一个和最后一个元素的宽度相等，只需给它们 flex: 1。

main {
  display: flex;
}

input {
  width: 200px;
}

main > div:first-child,
main > div:last-child {
  flex: 1;
}

<main>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div>
    <input type="text">
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  </div>
</main>

这会告诉第一个和最后一个项目消耗容器中免费 space 的相等分配。

因为中间的div（带输入）占了200px的宽度，带flex: 1的兄弟姐妹共享剩下的space（100% - 200px）。

flex: 1 规则是 shorthand 用于 flex: 1 1 0，它分解为：

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

第一个和最后一个 div 开始时的宽度不相等，因为 flex-basis 的初始设置是 auto。这意味着项目的大小基于其内容的长度。

如何给弹性项目相等的宽度？

How to give flex items equal width?

html

css

width

flexbox