0

Нужно выравнять 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>

3 ответа 3

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>

2
  • Это 4 колонны :D. Я сначала тоже так сделал, потом пошёл загуглил, что значит колонна :D 11 янв 2020 в 17:34
  • @МихаилКамахин, хех, не обратил внимания) спасибо
    – meine
    11 янв 2020 в 17:40
0

Если не принципиальна поддержка старых браузеров, то можно и 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>

0

В 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.