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

【问题标题】：How to give flex items equal width?如何给弹性项目相等的宽度？
【发布时间】：2018-02-23 05:33:39
【问题描述】：

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

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/

【问题讨论】：

标签： html css flexbox width

【解决方案1】：

将flex: 0 0 auto 分配给中间 div（使其占据与其内容一样多的宽度）和flex: 1 分配其他两个div（添加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>

【讨论】：

【解决方案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>

这告诉第一个和最后一个项目消耗容器中平均分配的可用空间。

因为中间的 div（带输入）占据 200px 的宽度，flex: 1 的兄弟共享剩余空间（100% - 200px）。

flex: 1 规则是flex: 1 1 0 的简写，可分解为：

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

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

【讨论】：