Как сделать 1/3 места для flexbox?

109

20 декабря 2021, 10:10

Я хочу сделать так, чтобы самый первый блок .post__intro.first занимал 2/3 места по горизонтали, а все блоки .post__intro занимали 1/3 места, как это сделать c помощью свойств флексбокса?

Блоку .post__intro я задал flex: 1, а .post__intro.first я задал flex: 2, но при таком решении при добавлении нового блока .post__intro, он не переходит на новую колонку

Пример, как должно выглядеть:

@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,600,700|Raleway:400,900&display=swap'); 
 
html{ 
	scroll-behavior: smooth; 
} 
 
body { 
	margin: 0; 
	font-size: 16px; 
	font-family: 'Open Sans', sans-serif; 
} 
 
img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
} 
 
.container { 
	max-width: 1300px; 
	width: 100%; 
	margin: 0 auto; 
} 
 
.intro { 
	font-family: 'Open Sans', sans-serif; 
} 
 
.posts__intro { 
	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; 
} 
 
.post__intro { 
	margin-top: 30px; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	flex-direction: column; 
	position: relative; 
	flex: 1; 
	margin-left: 30px; 
} 
 
.post__intro.first { 
	text-align: center; 
	color: white; 
	flex: 2; 
	margin-left: 0; 
} 
 
.post__intro:nth-child(3n+3) { 
	margin-left: 0; 
} 
 
.post__intro.first .post__intro__content { 
	position: absolute; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	height: 100%; 
	width: 100%; 
} 
 
.post__intro.first .post__intro__title { 
	font-size: 34px; 
	line-height: 1.25; 
	margin-bottom: 10px; 
	padding: 0 15px; 
} 
 
.post__intro.first .post__intro__img { 
	position: relative; 
} 
 
.post__intro:not(.first) img { 
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.3); 
	transition: filter .5s ease-in-out; 
} 
 
.post__intro:not(.first) img:hover { 
	filter: grayscale(100%) 
} 
 
.post__intro.first  .post__intro__img:before { 
	position: absolute; 
	display: block; 
	content: ''; 
	width: 100%; 
	height: 100%; 
	right: 0; 
	top: 0; 
	background-color: rgba(34, 41, 47, 0.9); 
} 
 
.post__intro.first .post__intro__text { 
	padding: 0 100px; 
	font-size: 18px; 
} 
 
.post__intro.first .post__intro__info { 
	margin-bottom: 15px; 
} 
 
.post__intro__info span:not(:last-child)::after { 
	content: '·'; 
	display: inline-block; 
	margin-left: 10px; 
	margin-right: 10px; 
} 
 
.post__intro:not(.first) .post__intro__title { 
	font-size: 20px; 
	margin-top: 20px; 
	margin-bottom: 5px; 
} 
 
.post__intro:not(.first) .post__intro__info { 
	margin-bottom: 10px; 
}

<div class="intro"> 
	<div class="container"> 
		 
		<div class="posts__intro"> 
 
			<div class="post__intro first"> 
				<div class="post__intro__img"> 
					<img src="https://picsum.photos/1000/1000" alt=""> 
				</div> 
				<div class="post__intro__content"> 
					<div class="post__intro__title"> 
						Zero BS CRM 3.0 Improves UI, Changes Database Structure, and Becomes More Extendable 
					</div> 
					<div class="post__intro__info"> 
						<span class="post__intro__date"> 
							7 декабря, 2019 
						</span> 
						<span class="post__intro__section"> 
							Новости 
						</span> 
					</div> 
					<div class="post__intro__text"> 
						The team behind Zero BS CRM launched version 3.0 of their WordPress plugin today. This is the first major release …  
					</div> 
				</div> <!-- .post__intro__content --> 
			</div> <!-- .first.post__intro --> 
 
			<div class="post__intro"> 
				<div class="post__intro__img"> 
					<img src="https://picsum.photos/500/500" alt=""> 
				</div> 
				<div class="post__intro__content"> 
					<div class="post__intro__title"> 
						Gutenberg: One Year Later 
					</div> 
					<div class="post__intro__info"> 
						<span class="post__intro__date"> 
							7 декабря, 2019 
						</span> 
						<span class="post__intro__section"> 
							Новости 
						</span> 
					</div> 
					<div class="post__intro__text"> 
						As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …  
					</div> 
				</div> <!-- .post__intro__content --> 
			</div> <!-- .post__intro --> 
 
		</div> <!-- .posts__intro --> 
 
	</div> <!-- .container --> 
</div> <!-- .intro -->

Что происходит при добавлении новых блоков:

@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,600,700|Raleway:400,900&display=swap'); 
 
html{ 
	scroll-behavior: smooth; 
} 
 
body { 
	margin: 0; 
	font-size: 16px; 
	font-family: 'Open Sans', sans-serif; 
} 
 
img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
} 
 
.container { 
	max-width: 1300px; 
	width: 100%; 
	margin: 0 auto; 
} 
 
.intro { 
	font-family: 'Open Sans', sans-serif; 
} 
 
.posts__intro { 
	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; 
} 
 
.post__intro { 
	margin-top: 30px; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	flex-direction: column; 
	position: relative; 
	flex: 1; 
	margin-left: 30px; 
} 
 
.post__intro.first { 
	text-align: center; 
	color: white; 
	flex: 2; 
	margin-left: 0; 
} 
 
.post__intro:nth-child(3n+3) { 
	margin-left: 0; 
} 
 
.post__intro.first .post__intro__content { 
	position: absolute; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	height: 100%; 
	width: 100%; 
} 
 
.post__intro.first .post__intro__title { 
	font-size: 34px; 
	line-height: 1.25; 
	margin-bottom: 10px; 
	padding: 0 15px; 
} 
 
.post__intro.first .post__intro__img { 
	position: relative; 
} 
 
.post__intro:not(.first) img { 
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.3); 
	transition: filter .5s ease-in-out; 
} 
 
.post__intro:not(.first) img:hover { 
	filter: grayscale(100%) 
} 
 
.post__intro.first  .post__intro__img:before { 
	position: absolute; 
	display: block; 
	content: ''; 
	width: 100%; 
	height: 100%; 
	right: 0; 
	top: 0; 
	background-color: rgba(34, 41, 47, 0.9); 
} 
 
.post__intro.first .post__intro__text { 
	padding: 0 100px; 
	font-size: 18px; 
} 
 
.post__intro.first .post__intro__info { 
	margin-bottom: 15px; 
} 
 
.post__intro__info span:not(:last-child)::after { 
	content: '·'; 
	display: inline-block; 
	margin-left: 10px; 
	margin-right: 10px; 
} 
 
.post__intro:not(.first) .post__intro__title { 
	font-size: 20px; 
	margin-top: 20px; 
	margin-bottom: 5px; 
} 
 
.post__intro:not(.first) .post__intro__info { 
	margin-bottom: 10px; 
}

<div class="intro"> 
	<div class="container"> 
		 
		<div class="posts__intro"> 
 
			<div class="post__intro first"> 
				<div class="post__intro__img"> 
					<img src="https://picsum.photos/1000/1000" alt=""> 
				</div> 
				<div class="post__intro__content"> 
					<div class="post__intro__title"> 
						Zero BS CRM 3.0 Improves UI, Changes Database Structure, and Becomes More Extendable 
					</div> 
					<div class="post__intro__info"> 
						<span class="post__intro__date"> 
							7 декабря, 2019 
						</span> 
						<span class="post__intro__section"> 
							Новости 
						</span> 
					</div> 
					<div class="post__intro__text"> 
						The team behind Zero BS CRM launched version 3.0 of their WordPress plugin today. This is the first major release …  
					</div> 
				</div> <!-- .post__intro__content --> 
			</div> <!-- .first.post__intro --> 
 
			<div class="post__intro"> 
				<div class="post__intro__img"> 
					<img src="https://picsum.photos/1000/1000" alt=""> 
				</div> 
				<div class="post__intro__content"> 
					<div class="post__intro__title"> 
						Gutenberg: One Year Later 
					</div> 
					<div class="post__intro__info"> 
						<span class="post__intro__date"> 
							7 декабря, 2019 
						</span> 
						<span class="post__intro__section"> 
							Новости 
						</span> 
					</div> 
					<div class="post__intro__text"> 
						As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …  
					</div> 
				</div> <!-- .post__intro__content --> 
			</div> <!-- .post__intro --> 
 
			<div class="post__intro"> 
				<div class="post__intro__img"> 
					<img src="https://picsum.photos/500/500" alt=""> 
				</div> 
				<div class="post__intro__content"> 
					<div class="post__intro__title"> 
						Gutenberg: One Year Later 
					</div> 
					<div class="post__intro__info"> 
						<span class="post__intro__date"> 
							7 декабря, 2019 
						</span> 
						<span class="post__intro__section"> 
							Новости 
						</span> 
					</div> 
					<div class="post__intro__text"> 
						As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …  
					</div> 
				</div> <!-- .post__intro__content --> 
			</div> <!-- .post__intro --> 
 
			<div class="post__intro"> 
				<div class="post__intro__img"> 
					<img src="https://picsum.photos/500/500" alt=""> 
				</div> 
				<div class="post__intro__content"> 
					<div class="post__intro__title"> 
						Gutenberg: One Year Later 
					</div> 
					<div class="post__intro__info"> 
						<span class="post__intro__date"> 
							7 декабря, 2019 
						</span> 
						<span class="post__intro__section"> 
							Новости 
						</span> 
					</div> 
					<div class="post__intro__text"> 
						As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …  
					</div> 
				</div> <!-- .post__intro__content --> 
			</div> <!-- .post__intro --> 
 
			<div class="post__intro"> 
				<div class="post__intro__img"> 
					<img src="https://picsum.photos/500/500" alt=""> 
				</div> 
				<div class="post__intro__content"> 
					<div class="post__intro__title"> 
						Gutenberg: One Year Later 
					</div> 
					<div class="post__intro__info"> 
						<span class="post__intro__date"> 
							7 декабря, 2019 
						</span> 
						<span class="post__intro__section"> 
							Новости 
						</span> 
					</div> 
					<div class="post__intro__text"> 
						As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …  
					</div> 
				</div> <!-- .post__intro__content --> 
			</div> <!-- .post__intro --> 
 
			<div class="post__intro"> 
				<div class="post__intro__img"> 
					<img src="https://picsum.photos/500/500" alt=""> 
				</div> 
				<div class="post__intro__content"> 
					<div class="post__intro__title"> 
						Gutenberg: One Year Later 
					</div> 
					<div class="post__intro__info"> 
						<span class="post__intro__date"> 
							7 декабря, 2019 
						</span> 
						<span class="post__intro__section"> 
							Новости 
						</span> 
					</div> 
					<div class="post__intro__text"> 
						As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …  
					</div> 
				</div> <!-- .post__intro__content --> 
			</div> <!-- .post__intro --> 
 
		</div> <!-- .posts__intro --> 
 
	</div> <!-- .container --> 
</div> <!-- .intro -->

Answer 1

.container { 
  max-width: 1200px; 
  margin: 0 auto; 
} 
 
.posts { 
  display: flex; 
  flex-wrap: wrap; 
} 
.posts__item { 
  box-sizing: border-box; 
  flex-grow: 1; 
  flex-shrink: 1; 
  flex-basis: calc((100% / 3) - 60px); 
} 
.posts__item:first-child { 
  flex-basis: calc((100% / 3) * 2 - 50px); 
  margin: 0 !important; 
} 
.posts__item:not(:nth-child(3)) { 
  margin: 0 0 30px 30px; 
} 
 
.post { 
  height: 300px; 
} 
.post img { 
  width: 100%; 
  height: 100%; 
}

<div class="container"> 
  <div class="posts"> 
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div> 
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div> 
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div> 
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div> 
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div> 
  </div> 
</div>

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает label в браузере на samsung

В браузере телефона samsung не работает labelСделал меню через тег label, кнопка бутеброд через label, нажимаю в телефоне на неё - она не работает

219

c++

Как нарисовать дугу? (SFML)

У меня вот вопрос, как нарисовать дугу? Именно как нарисовать дугу между двумя точками и через радиус искривления, точку искривления? (Через...

186

c++

Сортировка list и forward_list

Вот столкнулся с ситуацией, которую не могу обьяснитьРешил Я сравнить скорость сортировки list и forward_list (с одинаковым содержимым) и на моё удивление,...

283

c++

Быстрый пересчет CRC32

имеется такая проблема: надо быстро (худший вариант за O(log N)) пересчитать CRC32 массиваДан массив и 4 измененных ПОСЛЕДОВАТЕЛЬНЫХ байта