Как поместить элементы два или три в ряд?

Question

Мне нужно создать гибкую, масштабируемую, независимую от устройства компоновку, в которой мне нужно поместить 4 элемента в ряд, чтобы они менялись и слипались.Скажем, 4 изображения, как они, естественно, - одно над другим, и я просто хочу сгруппировать их в два ряда - 2 изображения рядом в один ряд, чтобы у меня не было проблем с макетом или структурой.Можете ли вы показать мне, как?Спасибо!

Answer 1

Используйте flexbox и сделайте его отзывчивым так:

.element-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.element-row {
  display: flex;
}

.element {
  flex: 0 1 46%;
  margin: 0 2% 20px 2%;
  margin-bottom: 3%;
  max-width: 150px;
}

.element img {
  display: block;
  width: 100%;
}

<div class="element-container">
  <div class="element-row">
    <div class="element">
      <img src="http://via.placeholder.com/150x150">
    </div>
    <div class="element">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
  <div class="element-row">
    <div class="element">
      <img src="http://via.placeholder.com/150x150">
    </div>
    <div class="element">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
</div>