Порядок элементов во flexbox
Ниже приведен мой код, который отлично работает с точки зрения пользовательского интерфейса. Хотя проблема в моем кнопки динамические (должно быть 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 .. но эта вещь также изменит порядок.
Ответы 3
Вы ищете 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>Это заставит мою кнопку начинать слева от контейнера (синий контейнер), хотя я хочу, чтобы последний элемент оставался справа. Это я выбираю row-reverse, чтобы начинать элементы только справа... но это обратный порядок, который ожидается
Вы можете использовать атрибут CSS order, чтобы вручную установить порядок элементов 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>Я думаю, что проще всего использовать выравнивание содержания для правильного выравнивания. Я добавил несколько комментариев в код.
.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>
Динамический код, который генерирует кнопки, может генерировать их в обратном порядке, тогда порядок будет таким, как ожидалось, и последняя кнопка будет «прилипать» вправо.