3

Один элемент из флексбокса почему-то уехал вправо. Как это исправить? Пробовала применять к нему margin-left отрицательный - не помогает. А когда задаю margin-right: auto, то уезжает слишком сильно влево, не вровень с верхним элементом. Такая картина получается

.items {
	max-width: 532px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-right: auto;
	margin-top: 53px;
}
.item_title {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 17px;
}
.item_text {
margin-bottom: 82px;
}
.last_item {
margin-left: -25px;
}
<section class="programm">
	<div class="container">
		<h2 class="section_title">Что будет на курсе</h2>
	</div>
	<div class="container">
		<div class="items">
		<div class="programm_item">
			<h3 class="item_title">7 лекций</h3>
			<p class="item_text">насыщенных практикой</p>
		</div>
		<div class="programm_item">
			<h3 class="item_title">2 гипотезы</h3>
			<p class="item_text">минимум, которые проверишь<br>на курсе</p>
		</div>
		<div class="programm_item">
			<h3 class="item_title">3 методички</h3>
			<p class="item_text">с пошаговым описанием<br>действий<br>как провести классный<br>CustDev и как проверить<br>любую гипотезу</p>
		</div>
		<div class="programm_item">
			<h3 class="item_title">20 интервью</h3>
			<p class="item_text">с пользователями твоего<br>продукта</p>
		</div>
	</div>
	</div>
</section>

6
  • 1
    флоат уберите - он во флексе не работает 20 апр 2020 в 16:00
  • А как тогда поставить флексбокс в левую часть контейнера? 20 апр 2020 в 16:02
  • просто оставьте так как есть - это позиция по умолчанию 20 апр 2020 в 16:02
  • 1
    codepen.io/topicstarter/pen/eYpdedz - смотрите 20 апр 2020 в 16:04
  • 1
    Спасибо большое, помогло) 20 апр 2020 в 16:08

2 ответа 2

2

.container {
  max-width: 600px;
}
.items {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.programm_item {
  width: 50%;
}

.item_title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 17px;
}

.item_text {
  margin-bottom: 82px;
}
<section class="programm">
  <div class="container">
    <h2 class="section_title">Что будет на курсе</h2>
  </div>
  <div class="container">
    <div class="items">
      <div class="programm_item">
        <h3 class="item_title">7 лекций</h3>
        <p class="item_text">насыщенных практикой</p>
      </div>
      <div class="programm_item">
        <h3 class="item_title">2 гипотезы</h3>
        <p class="item_text">минимум, которые проверишь<br>на курсе</p>
      </div>
      <div class="programm_item">
        <h3 class="item_title">3 методички</h3>
        <p class="item_text">с пошаговым описанием<br>действий<br>как провести классный<br>CustDev и как проверить<br>любую гипотезу</p>
      </div>
      <div class="programm_item">
        <h3 class="item_title">20 интервью</h3>
        <p class="item_text">с пользователями твоего<br>продукта</p>
      </div>
    </div>
  </div>
</section>

0
0

Сейчас, ширина каждого контейнера меняется относительно его содержимого. Установите фиксированную величину. Например item_text {width: 200px} или width: 50% у родительского div

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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