【css flex】將多個 放在同一行

 

使用style里的flex屬性

默認情況下，一個div獨占一行

使用css選擇器給外層div加上以下flex屬性，則該div的子div可以在同一行中顯示，

.runs-paginator-flex-container {
  flex: 1 1 auto;
  flex-direction: row-reverse;
  display: flex;
}

<div className="runs-paginator-flex-container">
    <div>1</div>
    <div>2</div>
</div>

 

關於flex字段:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

 

關於flex direction字段：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction

注意 flex-direction有4個選項：column，row，column-reverse，row-reverse，分別代表：在一列中放多個div，上對齊；在一行中放多個div，左對齊；在一列中放多個div，下對齊；在一行中放多個div，右對齊。

 

 

有人認為還能使用float，但是float的初衷是實現文字環繞圖片，我用float並沒有成功實現多個div放在同一行

關於float：https://www.yinchengli.com/2016/09/16/css-layout/