Как выровнять элемент по вертикали в строках flexbox

#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>
 

введите описание изображения здесь