Как я могу использовать Flexbox для выравнивания двух полей в столбце рядом со строкой?

То, что я хотел бы сделать, довольно специфично, поэтому я нарисовал картинку, чтобы проиллюстрировать это:

желаемое поведение

Я могу легко реализовать это:

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

но на этом сайте это выглядит не очень хорошо, потому что элемент E намного выше, чем C или D.

Я бы хотел, чтобы C и D складывались, когда окно браузера широкое, но не когда оно средней ширины.

Я пытаюсь реализовать это с помощью CSS и Flexbox, и я пытался сгруппировать C и D в div, но это создает проблемы при макете среднего размера.


html layout css flexbox
person Mohamad Zeina    schedule 18.07.2017    source источник
comment
stackoverflow.com/q/34480760/3597276   -  person Michael Benjamin    schedule 18.07.2017
comment
Не могли бы вы указать размеры контейнера и товара для всех размеров?   -  person Vadim Ovchinnikov    schedule 18.07.2017
comment
Если вас устраивает поддержка CSS-сетки, а также нужна поддержка IE/Edge, я могу предоставить вам подробную информацию. .   -  person Vadim Ovchinnikov    schedule 18.07.2017
comment
@VadimOvchinnikov, это было бы здорово, да, пожалуйста. Контейнер заполнен на 100%, с точками разрыва в 700px и 1000px.   -  person Mohamad Zeina    schedule 18.07.2017
comment
@Michael_B спасибо, я обязательно изучу Masonry, проблема в том, что я мало использовал JS   -  person Mohamad Zeina    schedule 18.07.2017

Ответы (2)


arrow_upward
1
arrow_downward

Flexbox — это 1D-макет. Конечно, вы можете добавить некоторую вложенность, некоторую фиксированную высоту, но это 1D и здесь не идеальное решение.

Гораздо лучше использовать здесь CSS Grid Layout, потому что это 2D-макет.

.grid {
  display: grid;
}

/* just styles for demo */
.grid__item {
  font-size: 3em;
  padding: 20px;
  background-color: orange;
  color: white;
  margin: 10px;
  
  /* using flexbox for text centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* medium screen */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .a {
    grid-column: 1 / span 2;
  }
}

/* wide screen */
@media screen and (min-width: 1000px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .a {
    grid-column: 1 / span 2;
  }
  
  .d {
    grid-row: 3;
  }
  
  .e {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
  }
}
<div class="grid">
  <div class="grid__item a">A</div>
  <div class="grid__item b">B</div>
  <div class="grid__item c">C</div>
  <div class="grid__item d">D</div>
  <div class="grid__item e">E</div>
</div>

Если вам нужна поддержка IE/Edge, вам придется использовать устаревший синтаксис и указывать место для каждой строки вручную. Реализация IE/Edge не имеет автоматического размещения ячеек сетки. Поэтому, если вы не укажете grid-column/grid-row для каждой ячейки, все они будут складываться в самую первую ячейку. Таким образом, для IE/Edge -ms-grid-row и -ms-grid-column значение по умолчанию равно 1. Демонстрация:

.grid {
  display: grid;
}

/* just styles for demo */
.grid__item {
  font-size: 3em;
  padding: 20px;
  background-color: orange;
  color: white;
  margin: 10px;
  
  /* using flexbox for text centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* medium screen */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
  }
  
  .a {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
  }
  
  .b {
    -ms-grid-row: 2;
  }
  
  .c {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  
  .d {
    -ms-grid-row: 3;
  }
  
  .e {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
}

/* wide screen */
@media screen and (min-width: 1000px) {
  .grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .a {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
  }
  
  .b {
    -ms-grid-column: 3;
  }
  
  .c {
    -ms-grid-row: 2;
  }
  
  .d {
    -ms-grid-row: 3;
    grid-row: 3;
  }
  
  .e {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 / span 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / span 2;
  }
}
<div class="grid">
  <div class="grid__item a">A</div>
  <div class="grid__item b">B</div>
  <div class="grid__item c">C</div>
  <div class="grid__item d">D</div>
  <div class="grid__item e">E</div>
</div>

Если вы хотите протестировать изменение размера, вот jsFiddle.

person Vadim Ovchinnikov    schedule 18.07.2017

arrow_upward
0
arrow_downward

демонстрация

измените значение гибкости по своему желанию

.box {
  background-color: green;
  margin: 5px; 
  /* padding: 30px; */
}

.one {
   display: flex; 

}

.a {
  flex: 3;
}

.b {
  flex: 2;
}

.two {
  display: flex;
  
}

.three {
  flex: 2;
}

.four {
  flex: 3;
}
<div class="main">
    <div class="one">
        <div class="a box">a</div>
        <div class="b box">b</div>
    </div>
    <div class="two">
        <div class="three">
            <div class="c box">c</div>
            <div class="d box">d</div>
        </div>
        <div class="four box">
            <div class="e">e</div>
        </div>
    </div>

</div>

person bhv    schedule 18.07.2017
comment
писать медиа-запросы и изменять значения flex - person bhv; 18.07.2017
comment
спасибо, это обеспечивает желаемый вид при широком макете, но ломается, когда вы сужаете окно. Это потому, что он будет пытаться выровнять C и D по вертикали (поскольку они вместе находятся в div) - person Mohamad Zeina; 18.07.2017
comment
@MobyMotion это вызывает, когда экран меньше 250 пикселей, но любой, как можно использовать с медиа-запросами, чтобы настроить макет и желаемый результат для мобильных устройств один за другим, - или просто уменьшить отступ, чтобы нормально работать.. обновил код - person bhv; 18.07.2017