代码之家 › 专栏 › 技术社区 › KoboldMines

无法使用display:flex(无引导)对齐列

flexbox css html

-2

KoboldMines · 技术社区 · 8 年前

问题是:

<div style="display: flex;">
    <div style="flex:1;">1</div>
    <div style="flex:1;">2</div>
    <div style="flex:1;">3</div>
    <div style="flex:1;">4</div>
    <div style="flex:1;">5</div>
    <div style="flex:1;">6</div>
</div>

第二行包含4列:

<div style="display: flex;">
    <div style="flex:1;">1</div>
    <div style="flex:1;">2</div>
    <div style="flex:1;">3</div>
    <div style="flex:1;">4</div>
</div>

Jsfiddle 它们没有很好的对齐方式,行为也不像行。有什么解决办法吗

<div style="display: flex;">
    <div style="flex:6;">1</div>
    <div style="flex:6;">2</div>
    <div style="flex:6;">3</div>
    <div style="flex:6;">4</div>
</div>

谢谢。

1 回复 | 直到 8 年前

Gabriele Petrioli 8 年前

如果你知道你可以用 flex: calc(1/max_columns) 在本例中6

<div style="display: flex;">
  <div style="flex:1;">1</div>
  <div style="flex:1;">2</div>
  <div style="flex:1;">3</div>
  <div style="flex:1;">4</div>
  <div style="flex:1;">5</div>
  <div style="flex:1;">6</div>
</div>

<div style="display: flex;">
  <div style="flex:calc(1/6);">1</div>
  <div style="flex:calc(1/6);">2</div>
  <div style="flex:calc(1/6);">3</div>
  <div style="flex:calc(1/6);">4</div>
</div>