使用flexbox自动对齐动态宽度内联元素

Question

有没有办法，使用flexbox，整齐地调整宽度动态的项目？

E.g。

---------------------------------
| textlink1 textlink2 textlink3 |
| sometext  sometext2 sometext3 |

而不是

---------------------------------
| textlink1 textlink2 textlink3 |
| sometext sometext2 sometext3  |

我有一个flex-direction: column的菜单列表但是为了响应，我想要使用行并让它动态地对齐内联项目。

div {
  width: 250px;
  display: flex;
  flex-wrap: wrap;
  border: solid 1px #000;
}

a {
  padding-right: 15px;
}

<div>
  <a href="#">textlink1</a>
  <a href="#">textlink2</a>
  <a href="#">textlink3</a>
  <a href="#">sometext1</a>
  <a href="#">sometext2</a>
  <a href="#">sometext3</a>
</div>

https://jsfiddle.net/jhntqLjq/5/

Answer 1

使用flex-basis: 33.3333%定义弹性项目的初始长度

Stack Snippet

div {
  width: 250px;
  display: flex;
  flex-wrap: wrap;
  border: solid 1px #000;
}

a {
  flex-basis: 33.3333%;
}

<div>
  <a href="#">textlink1</a>
  <a href="#">textlink2</a>
  <a href="#">textlink3</a>
  <a href="#">sometext1</a>
  <a href="#">sometext2</a>
  <a href="#">sometext3</a>
</div>