#css #layout #sass #flexbox
#css #макет #sass #flexbox
Вопрос:
Я слышал, что flex box является одномерным, просто хочу проверить, доступен ли какой-либо метод для выравнивания определенных элементов flex box (элементов с одинаковым порядком) по вертикальной линии, как на следующем рисунке. (круги с 0 должны быть на красной вертикальной линии)
Ответ №1:
Что касается вашей проблемы, вам нужно выбрать элементы, которые вы хотите переместить в строке, используя псевдоселекторы CSS. Я пришел к следующему решению.
Решение
Я надеюсь, что приведенный ниже код поможет вам.
<style>
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
justify-content: space-between;
}
.flex-left > div, .flex-right > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-left>div:nth-child(2n 2){
width: 200px;
}
.flex-right>div:nth-child(even){
width: 200px;
}
.flex-right>div:nth-child(odd){
background: #222;
color: #fff;
margin-left: -20vw;
}
</style>
<div class="flex-container">
<div class="flex-left">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="flex-right">
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>