Отобразить первые 2 элемента Flex по центру друг к другу и выровнять - PullRequest
Новая
       18

Отобразить первые 2 элемента Flex по центру друг к другу и выровнять

1 голос
/ 21 марта 2019

Я пытаюсь выровнять по центру первые 2 блока друг к другу (блоки с фиолетовой рамкой) и выровнять все 3 блока сверху.Я добился этого с помощью display: inline-flex, но можно ли получить те же результаты, используя всего лишь display: flex?

Fiddle 

.container {
  font-size: 0;
  box-sizing: border-box;
}

.blocks {
  display: inline-flex;
}

.blocks-left {
  align-items: center;
  width: 66%;
  vertical-align: top;
  border: 2px solid purple;
}

.blocks-right {
  width: 33%;
}

.block {
  width: 100%;
}

#block-1 {
  background: red;
  height: 100px;
}

#block-2 {
  background: blue;
  height: 200px;
}

#block-3 {
  background: green;
  height: 400px;
}
<div class="container">
  <div class="blocks blocks-left">
    <div id="block-1" class="block"></div>
    <div id="block-2" class="block"></div>
  </div>
  <div class="blocks blocks-right">
   <div id="block-3" class="block"></div>
   </div>
</div>

Ответы [ 2 ]

1 голос
/ 21 марта 2019

Если вы хотите изменить blocks на уровень блока display: flex, вы можете получить тот же результат, если сделаете свой container a flexbox и добавите align-self: flex-start к элементу blocks-left - см. демонстрацию ниже: 

.container {
  font-size: 0;
  box-sizing: border-box;
  display: flex; /* added */
}

.blocks {
  display: flex; /* now flex instead of inline-flex */
}

.blocks-left {
  align-items: center;
  align-self: flex-start; /* added */
  width: 66%;
  vertical-align: top;
  border: 2px solid purple;
}

.blocks-right {
  width: 33%;
}

.block {
  width: 100%;
}

#block-1 {
  background: red;
  height: 100px;
}

#block-2 {
  background: blue;
  height: 200px;
}

#block-3 {
  background: green;
  height: 400px;
}
<div class="container">
  <div class="blocks blocks-left">
    <div id="block-1" class="block"></div>
    <div id="block-2" class="block"></div>
  </div>
  <div class="blocks blocks-right">
   <div id="block-3" class="block"></div>
   </div>
</div>
0 голосов
/ 21 марта 2019

Установка display: flex для основного контейнера вместе с align-items: flex-start может работать. Это то, что вам нужно? 

.container {
  font-size: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
}

.blocks {
  display: flex;
}

.blocks-left {
  align-items: center;
  width: 66%;
  vertical-align: top;
  border: 2px solid purple;
}

.blocks-right {
  width: 33%;
}

.block {
  width: 100%;
}

#block-1 {
  background: red;
  height: 100px;
}

#block-2 {
  background: blue;
  height: 200px;
}

#block-3 {
  background: green;
  height: 400px;
}
<div class="container">
  <div class="blocks blocks-left">
    <div id="block-1" class="block"></div>
    <div id="block-2" class="block"></div>
  </div>
  <div class="blocks blocks-right">
    <div id="block-3" class="block"></div>
  </div>
</div>
...