Нужна помощь в создании контейнера Flex-box, который упаковывает и даже - PullRequest
Новая
       67

Нужна помощь в создании контейнера Flex-box, который упаковывает и даже

0 голосов
/ 14 апреля 2020

Попытка создать 2-х колоночный, 3-х рядный контейнер flexbox для меню с едой. Элементы продукта (которых должно быть 2 на строку) не переносятся при сжатии. Я ищу способ создать макет упаковки с помощью flexbox. Кроме того, как лучше всего использовать Media Queries для отображения названия продукта, когда макет сокращен для мобильного размера?

Я прилагаю код jsfiddle:

https://jsfiddle.net/5ksd34nf/# & Togetherjs = Ix1LEBTca6

(учтите, что без изображений дизайн меняется, поэтому я прилагаю фотографии)

HTML:

`

<section class="menu-page" id="Menu">
    <div class="TitleWrapper">
      <h1 class="title">Menu</h1>
    </div>
    <div class="menu-list">

      <div class="product">
        <div class="imgwrapper">
          <img src="images/burger.jpg" alt="Burger" class="food-image">
        </div>
        <div class="text">
          <div class="product-content">
            <h3 class="name">Burgers</h3>
            <h3 class="price">10 &euro;</h3>
          </div>
          <div class="ptags">
            <p class="allergens">Allergens:</p>
            <p class="info">Milk, Gluten</p>
          </div>
        </div>
      </div>

enter image description here

Как я могу выделить цену из Имени, используя flexbox?

1 Ответ

2 голосов
/ 14 апреля 2020

В принципе, вы можете сделать что-то вроде этого: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  border: 1px solid gray;
  width: 100%;
  margin-bottom: 20px;
}

.flex-sub-item {
  display: flex;
  justify-content: space-between;
}

@media screen and (min-width: 400px) {
  .flex-item {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
  }
  
  .flex-item:nth-child(2n) {
    margin-right: 0;
  }
}
<div class="flex-container">
  <div class="flex-item">
    <div class="flex-sub-item">
      <div>Title</div>
      <div>Price</div>
    </div>
  </div>

  <div class="flex-item">
    <div class="flex-sub-item">
      <div>Title</div>
      <div>Price</div>
    </div>
  </div>
</div>
...