如何给flex项宽度相等？

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用于其他两个div（添加border } s for illustration）

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

这告诉第一个和最后一个项消耗容器中可用空间的相等分布。

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

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

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

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