0

Я хочу сделать так, чтобы самый первый блок .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 -->

7
  • Вы уже это сделали задав flex: 2 для .post__intro.first.
    – E_K
    8 дек 2019 в 18:35
  • @E_K при добавлении новых блоков всё ломается, я добавил пример 8 дек 2019 в 18:42
  • Укажите минимальную ширину для блоков(min-width)
    – Mrage
    8 дек 2019 в 18:44
  • А почему не использовать псевдокласс :nth-child ? Судя по css вы умеете им пользоваться
    – Get-Web
    8 дек 2019 в 18:54
  • Вас не смущает что блоки .post__intro вложены в .post__intro? Сделайте для левой и правой части отдельные блоки обертки и уже обертке для левой части задайте flex-grow: 2.
    – E_K
    8 дек 2019 в 19:02

1 ответ 1

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>

Ваш ответ

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

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