Блог

Главная - Вопросы по программированию - Вложенные гибкие элементы равной ширины

Вложенные гибкие элементы равной ширины

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Есть ли способ, чтобы блоки 1, Блок2 и Блок3 имели одинаковую ширину с приведенной ниже HTML-структурой? Я пытался использовать flex: 1 , в результате чего получилось 2 столбца по 50%.

Скрипка

 .container {
  display: flex;
  align-items: flex-start;
}

.blocks {
  display: flex;
  flex: 1;
}

.blocks-left {
  align-items: center;
  border: 2px solid purple;
}

.blocks-right {

}

.block {
  flex: 1;
}

#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">Block1</div>
    <div id="block-2" class="block">Block2</div>
  </div>
  <div class="blocks blocks-right">
   <div id="block-3" class="block">Block3</div>
  </div>
</div>

Ответ №1:

сделайте так, чтобы block-right иметь 33% ширину и 66% слева. Для этого вы можете просто использовать flex:2 и flex:1 , чтобы левый блок занимал вдвое большую ширину, чем правый блок

 .container {
  display: flex;
  align-items: flex-start;
}

.blocks {
  display: flex;
  flex: 1;
}

.blocks-left {
  align-items: center;
  border: 2px solid purple;
  flex:2;
}

.blocks-right {
  flex:1;
}

.block {
  flex: 1;
}

#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">Block1</div>
    <div id="block-2" class="block">Block2</div>
  </div>
  <div class="blocks blocks-right">
   <div id="block-3" class="block">Block3</div>
  </div>
</div>

Комментарии:

1. Огромное спасибо за объяснение!