Как выровнять блоки

138

14 февраля 2022, 19:30

Нужно выравнять 8 блоков в 2 колоны.У каждого блока width: 275px;.Когда ставлю display: flex; блоки теряют свою ширину и выстраиваются в один ряд.

.favor-border { 
	display: flex; 
} 
 
.favor-elem { 
	width: 275px; 
	height: 180px; 
	background: #393F47; 
	margin-right: 1px; 
	flex-direction: row; 
}

<div class="favor-border"> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
</div>

Answer 1

* { 
  margin: 0; padding: 0; 
  box-sizing: border-box; 
} 
 
.favor-border { 
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  margin: -1px; 
} 
 
.favor-elem { 
  width: 50%; height: 180px; 
  padding: 1px; 
} 
 
.favor-elem__inner { 
  background-color: #393F47; 
  height: 100%; 
}

<div class="favor-border"> 
  <div class="favor-elem"> 
    <div class="favor-elem__inner"></div> 
  </div> 
  <div class="favor-elem"> 
    <div class="favor-elem__inner"></div> 
  </div> 
  <div class="favor-elem"> 
    <div class="favor-elem__inner"></div> 
  </div> 
  <div class="favor-elem"> 
    <div class="favor-elem__inner"></div> 
  </div> 
  <div class="favor-elem"> 
    <div class="favor-elem__inner"></div> 
  </div> 
  <div class="favor-elem"> 
    <div class="favor-elem__inner"></div> 
  </div> 
  <div class="favor-elem"> 
    <div class="favor-elem__inner"></div> 
  </div> 
  <div class="favor-elem"> 
    <div class="favor-elem__inner"></div> 
  </div> 
</div>

Answer 2

Если не принципиальна поддержка старых браузеров, то можно и grid использовать

.favor-border { 
    display: grid; 
    grid-template-rows: 1fr 1fr ; 
    grid-template-columns: 1fr 1fr; 
    width:700px; 
    margin: 0 auto; 
} 
 
.favor-elem { 
    width: 275px; 
    height: 180px; 
    background: #393F47; 
    margin-right: 1px; 
    flex-direction: row; 
    border: 1px solid red; 
}

<div class="favor-border"> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
		<div class="favor-elem"></div> 
</div>

Answer 3

В 4 и 2 колоны вот так:
width: calc(25% - 15px/3) означает, что элемент будет равен 25%, а также у каждого блока нужно вычесть сумму отступов, делённую на количество отступов в линии.
Сжатие в 2 колонны написал в медиазапросах по этой же логике при 500px и меньше

*, *:before, *:after { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.favor-border { 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
  -webkit-flex-wrap: wrap; 
  -moz-flex-wrap: wrap; 
  -ms-flex-wrap: wrap; 
  -o-flex-wrap: wrap; 
  flex-wrap: wrap; 
  max-width: 1000px; 
  margin: 0 auto; 
} 
 
.favor-elem { 
  background: #393F47; 
  min-height: 150px; 
  width: calc(100%/4 - 15px/3); 
  margin-top: 20px; 
  margin-right: 5px; 
} 
 
.favor-elem:nth-child(4n) { 
  margin-right: 0; 
} 
 
@media (max-width: 500px) { 
 
  .favor-elem { 
    width: calc(50% - 5px/2); 
    margin-right: 5px; 
  } 
 
  .favor-elem:nth-child(4n) { 
    margin-right: 0; 
  } 
   
  .favor-elem:nth-child(2n) { 
    margin-right: 0; 
  } 
}

<div class="favor-border"> 
  <div class="favor-elem"></div> 
  <div class="favor-elem"></div> 
  <div class="favor-elem"></div> 
  <div class="favor-elem"></div> 
  <div class="favor-elem"></div> 
  <div class="favor-elem"></div> 
  <div class="favor-elem"></div> 
  <div class="favor-elem"></div> 
</div>