Как сделать Flex: 1 для мобильных устройств отзывчивым? - PullRequest
Новая
       21

Как сделать Flex: 1 для мобильных устройств отзывчивым?

0 голосов
/ 03 мая 2019

Я создал 3 столбца, каждый с одинаковой точной шириной.Я использовал следующий код для создания этого:

Мой план состоял в том, чтобы иметь 3 делителя с шириной 33,33% каждый, а на мобильных телефонах каждый делитель категории должен иметь 100%.

Я попробовал это с width: 33.33%, но так как я хочу немного промежутка между div, 33,33% это слишком большая ширина.

Вот почему я попробовал flex.

Как я могу сделать эту версию для мобильных телефонов, чтобы каждая категория div имела ширину 100? 

.category-main-layout {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin: auto;
}
.category {
    flex: 1;
    text-align: center;
}
<div class="category-main-layout">
    <div class="category">
    CONTENT
    </div>
    <div class="category">
    CONTENT
    </div>
    <div class="category">
    CONTENT
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 03 мая 2019

эй, вы можете попробовать это гибким способом, вам нужно немного изменить свой код

см. Мою скрипку https://jsfiddle.net/arindam1996/v4ya76th/3/

.category-main-layout {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
}
.category {
    flex: 1;
    text-align: center;
}

@media screen and (max-width: 576px) {
  .category {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
}
<div class="category-main-layout">
    <div class="category">
    CONTENT
    </div>
    <div class="category">
    CONTENT
    </div>
    <div class="category">
    CONTENT
    </div>
</div>
0 голосов
/ 03 мая 2019

вы можете использовать медиа-запросы для достижения этой цели. Здесь, если размер экрана превышает 500 пикселей, категории будут отображаться в виде блоков, поэтому ширина каждой из них равна 100%. 

.category-main-layout {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.category {
  flex-grow: 1;
  text-align: center;
  border: 1px red solid;
}

@media screen and (max-width: 500px) {
  .category-main-layout {
    display: block;
  }
}
<div class="category-main-layout">
  <div class="category">
    CONTENT
  </div>
  <div class="category">
    CONTENT
  </div>
  <div class="category">
    CONTENT
  </div>
</div>
...