如何给flex项目等宽？ [英] How to give flex items equal width?

问题描述

我想第一个和最后一个元素具有相同的宽度。如何做到这一点？

main {display：flex;证明内容：空间之间; width：100％;} input {width：200px;}

<主> < DIV> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。如果你想让自己的工作变得更加简单， Duis aute irure dolor in rennederit 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/

解决方案

给 flex：0 0 auto div（这样它就占用了内容的宽度）和 flex：1 为其他两个div（添加 border <请注意，这个解决方案假设中间div 有一个固定的 （你已经给了你的 input 一个固定的 width ） - 见下面的演示：



main {display：flex;证明内容：空间之间; 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。如果你想让自己的工作变得更加简单， Duis aute irure dolor in rennederit 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>

I would like the first and last elements to have the same width. How to do it?

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/

解决方案

Give flex: 0 0 auto to the middle div (so that it occupies as much width as its contents have) and flex: 1 for the other two divs (adding borders for illustration)

Note that this solution assumes the middle div has a fixed width (you've given your input a fixed width) - see demo below:

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>

这篇关于如何给flex项目等宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！