Использование Flexbox / Grid в CSS, создание стека изображений на мобильных устройствах - PullRequest
Новая
       4

Использование Flexbox / Grid в CSS, создание стека изображений на мобильных устройствах

0 голосов
/ 25 апреля 2018

Я пытаюсь освоить макет сетки в CSS3.Я хочу написать немного HTML / CSS, который позволяет стеку 3х1 при просмотре на мобильном устройстве.На данный момент, квадраты просто уменьшаются, пока не станут маленькими.Раньше я мог работать с мобильным CSS, но работа с сетками для меня новость.Может кто-нибудь предложить несколько указателей или предложений?

Вот мой код:

HTML: 

<div class="container"> 

<div class="grid">
  <div class="cell">
    <img src="https://www.easycalculation.com/area/images/big-square.gif"> 

  </div>
  <div class="cell">
    <img src="https://www.easycalculation.com/area/images/big-square.gif">
  </div>
  <div class="cell">
    <img src="https://www.easycalculation.com/area/images/big-square.gif">
  </div>
</div>

CSS: 

.container {
  width: 100%;
  margin: 0 auto;
}

.grid {
  display: flex;         
  flex-wrap: wrap;      
  justify-content: space-around;

}

.cell {
  flex: 0 0 32%;         
  margin-bottom: 5px;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    background-color: #dedede;
}

Вот ссылка CodePenа также: https://codepen.io/anfperez/pen/QrEBLZ

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Попробуйте этот CSS: (codepen https://codepen.io/bonniemellott/pen/ELypzm)

.container {
  width: 100%;
  margin: 0 auto;
}

.grid {
  display: flex;         
  justify-content: space-between;
  flex-wrap: wrap;
}

.cell {
     //removed flex attribute
  margin-bottom: 5px;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    background-color: #dedede;
}
0 голосов
/ 25 апреля 2018

Добавьте это к вашему css. Вам нужно будет использовать медиа-запрос для укладки ящиков.Вы можете сделать это, установив flex-direction:column на небольших устройствах 

@media (max-width: 768px) { /*You can decrese this number if you want only on small devices*/
  .grid {
    flex-direction: column;
  }
}

Вот обновленная кодовая ручка ссылка

...