Как выровнять два элемента Flexbox?
У меня проблема с flexbox. Я попытался выровнять два элемента; один к верху контейнера, а другой к центру. В большинстве примеров flexbox использовались три элемента, а не два. Итак, я попробовал собственное решение.
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
height: 100px;
background-color: #dfdfdf;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
}
#box2 {
display: flex;
background-color: #00ff00;
}
#dummy {
display: flex;
opacity: 0;
}<div id = "main">
<div id = "box1">box1</div>
<div id = "box2">box2</div>
<div id = "dummy">dummy</div>
</div>... и я также применил это к горизонтальному корпусу.
#main {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
height: 100px;
background-color: #dfdfdf;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
width: 200px;
}
#box2 {
display: flex;
background-color: #00ff00;
width: 100px;
}
#dummy {
display: flex;
opacity: 0;
width: 200px;
}<div id = "main">
<div id = "box1">box1</div>
<div id = "box2">box2</div>
<div id = "dummy">dummy</div>
</div>Однако ему нужен бесполезный фиктивный элемент. Думаю, это плохая идея :(
Есть ли лучший способ решить эту проблему?
Ответы 2
вам не нужно добавлять этот «фиктивный» div. По моему мнению, вы должны сохранить гибкость отображения в своем контейнере, но измените justify-content: space-between на justify-content: center.
Затем просто добавьте сначала абсолютную позицию, дочерний элемент, и отобразите его в верхней части контейнера. Также не забудьте добавить относительное положение к вашему контейнеру.
Вот рабочий код:
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
height: 100px;
background-color: #dfdfdf;
position: relative;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
position:absolute;
top:0;
width:100%;
}
#box2 {
display: flex;
background-color: #00ff00;
}
Рабочий пример: https://jsfiddle.net/95Lwcbuk/1/
Если вы хотите использовать только flex-box, вы можете обернуть другой элемент .container вокруг каждого из ваших боксов, настроить их также на использование flex, но установите для первого значение justify-content: flex-start, а для последнего - justify-content: flex-end.
См. Пример
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
height: 100px;
background-color: #dfdfdf;
}
.container {
flex-basis:50%;
display:flex;
flex-direction:column;
}
.container:first-child {
justify-content: flex-start;
}
.container:last-child {
justify-content: flex-end;
}
#box1 {
background-color: #ff0000;
}
#box2 {
background-color: #00ff00;
}<div id = "main">
<div class = "container">
<div id = "box1">box1</div>
</div>
<div class = "container">
<div id = "box2">box2</div>
</div>
</div>