1

Есть оболочка для контейнера (headerDesktopFlex), у нее задан display flex и внутри есть 3 дочерних элемента, как сделать так что бы первый элемент отражался с правой стороны, а остальные были прижаты слево?

<div class="headerDesktopFlex">
      <div class="headerDesktop_logo">
        <img src="./assets/logo.png" alt="">
      </div>
      <div class="headerDesktop_howItWork">
        <a href="#">как работать с сервисом</a>
      </div>
      <div class="headerDesktop_changeCity">
        <a href="#">выберите город</a>
      </div>
      <div class="headerDesktop_profile"></div>
    </div>

1 ответ 1

1

Присвоить первому элементу свойство order больше чем у остальных

Свойство order задает порядок следования отдельно взятого flex-блока внутри flex-контейнера.

Если нужно прижать элемент к правому краю, то присвоить свойство margin-left: auto;

.flex {
  display: flex;
}

.item {
  display: block;
  padding: 20px;
  background-color: red;

}

.item_1 {
  order: 5;
  margin-left: auto;
}

.item_2 {
  background-color: blue;
}

.item_3 {
background-color: green;  
}
<div class="flex">
  <div class="item item_1">item1</div>
  <div class="item item_2">item2</div>
  <div class="item item_3">item3</div>
</div>

Ваш ответ

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

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