Я совершенно не знаком с Flexbox и хотел выровнять кнопки, но я не мог понять, как обращаться с обычным случаем с помощью кнопки с выравниванием по центру и правой кнопкой в одной строке, используя только Flexbox.
Тем не менее, я нашел способ, который использовал невидимый элемент с выравниванием по левому краю с той же длиной, что и выровненный по правому краю элемент, и flex justify-content
с space-between
, чтобы средний элемент был центрирован в строке.
Есть ли более прямой способ с Flexbox?
.flexcontainer {
display: flex;
justify-content: space-between;
width: 500px;
height: 200px;
}
.iteminvisible {
flex: 0 1 auto;
width: 100px;
height: 100px;
visibility: hidden;
}
.itemcenter {
flex: 0 1 auto;
width: 150px;
height: 100px;
.itemright {
flex: 0 1 auto;
width: 100px;
height: 100px;
}
<div class="flexcontainer">
<div class="iteminvisible">Other</div>
<div class="itemcenter">One</div>
<div class="itemright">Other</div>
</div>