Flexbox, как сохранить минимум 2 столбца на 400 пикселей? - PullRequest
Новая
       52

Flexbox, как сохранить минимум 2 столбца на 400 пикселей?

0 голосов
/ 09 июня 2018

https://codepen.io/leon-yum/pen/XYpgzj?editors=1100

Я пытаюсь убедиться, что на мобильном телефоне (400 пикселей и ниже) моя сетка flexbox придерживается 2 столбцов / блоков.Однако, что бы я ни делал, он привязывается к 1 столбцу или каждая строка остается на 3 или 4 столбца соответственно.

Ожидается при ширине 400 пикселей:

enter image description here

Результаты:

enter image description here

HTML 

<div class="flex-grid-thirds">
  <div class="col">This little piggy went to market.</div>
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
</div>

<div class="flex-grid-four">
  <div class="col">This little piggy went to market.</div>
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
  <div class="col">This little piggy had roast beef.</div>
</div>

CSS 

.flex-grid-thirds,
.flex-grid-four {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.flex-grid-thirds .col {
  width: 32%;
}

.flex-grid-four .col {
  width: 24%;
}

@media (max-width: 400px) {
  .flex-grid-thirds,
  .flex-grid-four {
    .col {
      width: 40%;
    }
  }
}

* {
  box-sizing: border-box;
}
body {
  padding: 20px;
}
.flex-grid { 
  margin: 0 0 20px 0;
}
.col {
  background: salmon;
  padding: 20px;
}

1 Ответ

0 голосов
/ 09 июня 2018

Вот рабочее решение: https://codepen.io/anon/pen/vrgZVa?editors=1100. Все, что вам нужно, это просто поместить все элементы в один элемент-обертку (теперь у вас есть 2 элемента) и присвоить flex-wrap: wrap свойство этой обертке.И еще одна вещь, которую нужно сделать: дать ширину вашим элементам (проценты предпочтительнее), и если вы дадите им width: 50%, будет 2 столбца, если width: 33% - 3 столбца и так далее.Я не трогал поля и такие мелочи, просто продемонстрировал то, что вы просили: 

.flex-grid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.flex-grid-thirds .col {
  width: 32%;
}

.flex-grid-four .col {
  width: 24%;
}

@media (max-width: 400px) {
  .flex-grid {
    .col {
      width: 50%;
    }
  }
}

* {
  box-sizing: border-box;
}

body {
  padding: 20px;
}
.flex-grid { 
  margin: 0 0 20px 0;
}
.col {
  background: salmon;
  padding: 20px;
}
<div class="flex-grid">
  <div class="col">This little piggy went to market.</div>
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
  <div class="col">This little piggy went to market.</div>
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
  <div class="col">This little piggy had roast beef.</div>
</div>
...