Question

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

Button 4, Button 3, Button 2, Button 1

.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的原因。但是这件事会改变顺序也是

Answer 1

我认为最简单的方法是使用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>

Answer 2

您正在寻找flex-direction: row而不是flex-direction: row-reverse上的action-container：

.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;
}

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>

Answer 3

您可以使用order CSS属性来手动设置flexbox元素的顺序。同样，在设置顺序之后，如果您希望最后一个按钮停留在末尾，则可能需要设置按钮的margin-left属性而不是margin-right。下面是一个工作示例-

.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-left: 10px;
}

button:first-child {
margin-right: 0;
}

<div class="container">
  <div class="title-container">
    <h3>
      Heading Title
    </h3>
  </div>
  <div class="action-container">
    <button style="order: 4">Button 1</button>
    <button style="order: 3">Button 2</button>
    <button style="order: 2">Button 3</button>
    <button style="order: 1">Button 4</button>
  </div>
</div>

flexbox中元素的顺序

3 个答案: