1

Здравствуйте, такой вопрос. Сейчас в контейнере три элемента друг за другом, равной ширины. Возможно ли только третий div увеличить в ширину и расположить под вторым div-ом?

.pricing {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto 3em;
}
.pricing__item,
.pricing__feature-list {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  text-align: center;
}
<div class="pricing pricing--rabten">
  <div class="pricing__item">
    <h3 class="pricing__title">заголовок</h3>
    <p class="pricing__sentence">текст</p>
    <ul class="pricing__feature-list">
      <li class="pricing__feature">список</li>
      <li class="pricing__feature">список</li>
      <li class="pricing__feature">список</li>
    </ul>
  </div>
  <div class="pricing__item">
    <h3 class="pricing__title">заголовок</h3>
    <p class="pricing__sentence">текст</p>
    <ul class="pricing__feature-list">
      <li class="pricing__feature_">список</li>
      <li class="pricing__feature">список</li>
      <li class="pricing__feature">список</li>
    </ul>
  </div>
  <div class="pricing__item">
    <h3 class="pricing__title">заголовок</h3>
    <p class="pricing__sentence">текст</p>
    <ul class="pricing__feature-list">
      <li class="pricing__feature">список</li>
      <li class="pricing__feature">список</li>
      <li class="pricing__feature">список</li>
    </ul>
  </div>
</div>
</div>

2
  • flex-wrap: wrap-reverse
    – Sergey
    27 окт 2016 в 9:50
  • @Sergey спасибо, но не то. Мне необходимо один конкретный флекс элемент разместить под другой.
    – Alla
    27 окт 2016 в 10:17

2 ответа 2

1

Для увеличение ширины блока относительно других можно использовать свойство flex-grow,к элементу,а если нужно изменить порядок его следования,то можно использовать order,order: -1; делает его первым,order: 1; последним.

1

Вот подробный код + ссылка на jsfiddle

.my-flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 70px;
  width: 100%;
  background: gray;
}
.gallery0 {
  display: flex;
  background: #33D1FF;
  width: 20%;
  margin: 1%;
  height: 70%;
  border-radius: 10px;
}
.gallery1 {
  display: flex;
  background: #33D1FF;
  width: 20%;
  margin: 1%;
  height: 70%;
  border-radius: 10px;
}
.gallery2 {
  display: flex;
  background: #33D1FF;
  width: 50%;
  margin: 1%;
  height: 70%;
  border-radius: 10px;
}
.galtext {
  font-size: 25px;
  font-style: normal;
  font-family: 'Lato', sans-serif;
  color: white;
  margin: auto;
}
<div class="my-flex-container">

  <div class="gallery0">
    <span class="galtext">Div</span> 
  </div>

  <div class="gallery1">
    <span class="galtext">Div2</span>
  </div>

  <div class="gallery2">
    <span class="galtext">Div3</span>
  </div>

</div>

Ваш ответ

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

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