代码之家 › 专栏 › 技术社区 › Aero Wang

是否可以使列布局中的所有弹性项具有相同的宽度?

flexbox css3 css

0

Aero Wang · 技术社区 · 6 年前

column {display: flex; flex-direction: column}
column > * {border: 1px solid}

<column>
  <flex1>1234567890</flex1>
  <flex2>abc</flex2>
  <flex3>...random length...</flex3>
</column>

上面没有完成我喜欢做的事。

2 回复 | 直到 6 年前

1

Temani Afif 6 年前

使用 inline-flex 和 width:100% 对于弹性项目:

column {
  display: inline-flex;
  flex-direction: column
}

column>* {
  width: 100%;
  border:1px solid red;
}

<column>
  <flex1>1234567890</flex1>
  <flex2>abc</flex2>
  <flex3>...random length...</flex3>
</column>

2

-1

codesayan 6 年前

“列宽相同”,我想就是这样。。

.parent {
  display: flex;
}

.parent div {
  border: 1px solid red;
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
}

<div class="parent">
  <div>1234567890</div>
  <div>abc</div>
  <div>...random length...</div>
</div>