Помощь с flex, контент не распределяется?

Question

[tifio63]

я может что-то упускаю, но почему у меня не работает flex?
https://codepen.io/ilq-filimonow/pen/qBBLpjQ

<div class="about__items">
				<div class="about__item">
					<img src="img/about-2.png">
					<div class="about__item-title">
						Адвокатское сопровождение
					</div>
					<div class="about__item-text">
						Мы гарантируем полное профессиональное обслуживание клиентов в заявленных сферах деятельности и соблюдение 
конфиденциальности.
					</div>
					<div class="about__item-btn">
						<a class="about__item-link" href="#">Подробнее</a>

						<a href="#" data-fancybox data-src="#modal" href="javascript:;" class=" default-btn">
							Заказать
						</a>

					</div>
				</div>
			</div>
			<div class="about__items">
				<div class="about__item">
					<img src="img/about-2.png">
					<div class="about__item-title">
						Адвокатское сопровождение
					</div>
					<div class="about__item-text">
						Мы гарантируем полное профессиональное обслуживание клиентов в заявленных сферах деятельности и соблюдение 
конфиденциальности.
					</div>
					<div class="about__item-btn">
						<a class="about__item-link" href="#">Подробнее</a>

						<a href="#" data-fancybox data-src="#modal" href="javascript:;" class=" default-btn">
							Заказать
						</a>

					</div>
				</div>
			</div>
			<div class="about__items">
				<div class="about__item">
					<img src="img/about-2.png">
					<div class="about__item-title">
						Адвокатское сопровождение
					</div>
					<div class="about__item-text">
						Мы гарантируем полное профессиональное обслуживание клиентов в заявленных сферах деятельности и соблюдение 
конфиденциальности.
					</div>
					<div class="about__item-btn">
						<a class="about__item-link" href="#">Подробнее</a>

						<a href="#" data-fancybox data-src="#modal" href="javascript:;" class=" default-btn">
							Заказать
						</a>

					</div>
				</div>
			</div>

.about__items {
    display: flex;
    justify-content: space-between; }
  .about__item {
    max-width: 300px;
    text-align: center; }

Answer 1

[Павел Диденко]

Если вам нужно, чтобы эти три блока встали в ряд - то задайте им родителя и ему display: flex;
Если нужно, чтобы внутри каждого блока встали в ряд - то задайте display: flex этому классу .about__item

Comments

[tifio63]

надо отдыха.. продублировал на автомате .about__items...он у меня родитель всех этих блоков был, поправил. и спасибо

[Павел Диденко]

tifio63, бывает)

[владмир Иванов]

tifio63, что порвравил???

[tifio63]

владмир Иванов, присвоить надо было родителю flex

.main {
    display: flex;
    justify-content: space-between; }
.about__item {
max-width: 300px;
text-align: center; }

<div class="main">
	<div class="about__items">
	        <div class="about__item">
	          <img src="img/about-2.png">
	          <div class="about__item-title">
	            Адвокатское сопровождение
	          </div>
	          <div class="about__item-text">
			Мы гарантируем полное профессиональное обслуживание клиентов в заявленных сферах деятельности и соблюдение 
			конфиденциальности.
	          </div>
	          <div class="about__item-btn">
	            <a class="about__item-link" href="#">Подробнее</a>
	
	            <a href="#" data-fancybox data-src="#modal" href="javascript:;" class=" default-btn">
	              Заказать
	            </a>
	
	          </div>
	        </div>
	      </div>
	      <div class="about__items">
	        <div class="about__item">
	          <img src="img/about-2.png">
	          <div class="about__item-title">
	            Адвокатское сопровождение
	          </div>
	          <div class="about__item-text">
			Мы гарантируем полное профессиональное обслуживание клиентов в заявленных сферах деятельности и соблюдение 
			конфиденциальности.
	          </div>
	          <div class="about__item-btn">
	            <a class="about__item-link" href="#">Подробнее</a>
	
	            <a href="#" data-fancybox data-src="#modal" href="javascript:;" class=" default-btn">
	              Заказать
	            </a>
	
	          </div>
	        </div>
	      </div>
	      <div class="about__items">
	        <div class="about__item">
	          <img src="img/about-2.png">
	          <div class="about__item-title">
	            Адвокатское сопровождение
	          </div>
	          <div class="about__item-text">
			Мы гарантируем полное профессиональное обслуживание клиентов в заявленных сферах деятельности и соблюдение 
			конфиденциальности.
	          </div>
	          <div class="about__item-btn">
	            <a class="about__item-link" href="#">Подробнее</a>
	
	            <a href="#" data-fancybox data-src="#modal" href="javascript:;" class=" default-btn">
	              Заказать
	            </a>
	
	          </div>
	        </div>
	      </div>
</div>