时间戳

首页 > 解决方案 > flexbox中元素的排序

html - flexbox中元素的排序

问题描述

以下是我在 UI 方面运行良好的代码。虽然问题是我的按钮是动态的（数字应该是 2、3、4、5、6 等）所以它应该是Button 1, Button 2, Button 3, Button 4而不是Button 4, Button 3, Button 2, Button 1。让我知道如何使用 flexbox 进行管理。

.container {
  border: 2px solid red;
  display: flex;
  width: 100%;
}
.title-container {
  border: 1px solid green;
  flex: 1;
}
.action-container {
  border: 1px solid blue;
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
}
button {
  margin-right: 10px;
}
button:first-child {
  margin-right: 0;
}
<div class="container">
  <div class="title-container">
    <h3>
      Heading Title
    </h3>
  </div>
  <div class="action-container">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
  </div>
</div>

编辑 -

我知道flex-direction: row会使要制作的元素出现在正确的位置，但我希望最后一个元素粘在最后，所以这就是我选择的原因flex-direction: row-reverse..但是这件事也会改变顺序。

标签： htmlcssflexbox

解决方案

我认为最简单的方法是使用justify-content进行正确对齐。我在代码中添加了一些注释。

.container {
  border: 2px solid red;
  display: flex;
  width: 100%;
}

.title-container {
  border: 1px solid green;
  flex: 1;
}

.action-container {
  border: 1px solid blue;
  flex: 1;
  display: flex;
  flex-direction: row; /* Changed */
  justify-content: flex-end; /* Added */
}
/*
  Add margin to each button except for the first one
*/
button:not(:first-child) {
  margin-left: 5px;
}
<div class="container">
  <div class="title-container">
    <h3>
      Heading Title
    </h3>
  </div>
  <div class="action-container">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
  </div>
</div>

推荐阅读