Динамический гибкий ящик на обертке

#html #css #reactjs #flexbox

Вопрос:

В настоящее время у меня есть следующее

HTML

 lt;divgt;  lt;div class="left"gt;lt;/divgt;  lt;div class="center"gt;lt;/divgt;  lt;div class="right"gt;lt;/divgt; lt;/divgt;

Я хотел бы использовать flexbox для достижения следующих макетов.

Представление Цели

Рабочий стол работает, мобильный выглядит так, что НЕВЕРНО

Текущее / Неправильное представление

Ответ №1:

Желаемый внешний вид может быть достигнут двумя способами flexbox : с помощью системы или с помощью grid системы. тем не менее, есть и другие методы, но в целом у нас есть такие варианты.

И я предлагаю использовать сетку вместо flex, если вы хотите создать динамический flexbox

Способ первый (с использованием flexbox )

 .one ,.two,.three{  height: 50px;  width: 100px;  margin: 20px;  background-color: blue;  }  .main{    display: flex;  }    @media only screen and (max-width: 368px) {  .main{    display: block;      }  .two{  position: absolute;  left:130px;  top:2px;  height: 120px;  background-color: red;  }  }

 lt;!DOCTYPE htmlgt;  lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;titlegt;Method 1lt;/titlegt;  lt;/headgt;  lt;bodygt;    lt;div class="main"gt;  lt;div class="one"gt;Leftlt;/divgt;  lt;div class="two"gt;centerlt;/divgt;  lt;div class="three"gt;rightlt;/divgt;  lt;/divgt;  lt;/bodygt;  lt;/htmlgt;

Метод второй (рекомендуется) с использованием grid системы

 .grid-container {  display: grid;  grid-gap: 10px;  background-color: #2196F3;  padding: 10px; }  .grid-item {  background-color: rgba(255, 255, 255, 0.8);  text-align: center;  padding: 20px;  font-size: 30px; }  .item1 {  grid-column: 1;  grid-row: 1; }  .item2 {  grid-column: 2;  grid-row: 1; }  .item3 {  grid-column: 3;  grid-row: 1; }  @media only screen and (max-width: 368px) {  .item1 {  grid-column: 1 / span 2;  grid-row: 1;  }  .item2 {  grid-column: 3;  grid-row: 1 / span 2;  }  .item3 {  grid-column: 1 / 3;  grid-row: 2;  } }

 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;/headgt;  lt;bodygt;   lt;div class="grid-container"gt;  lt;div class="grid-item item1"gt;Leftlt;/divgt;  lt;div class="grid-item item2"gt;Centerlt;/divgt;  lt;div class="grid-item item3"gt;Rightlt;/divgt;  lt;/divgt;  lt;/bodygt;  lt;/htmlgt;

Надеюсь, это поможет вам достичь вашей цели, наслаждайтесь .