it-swarm.com.ru

Заставить гибкий элемент плавать вправо

У меня есть

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div> another child </div>
</div>

Родитель имеет

.parent {
    display: flex;
}

Для моего первого ребенка я хочу просто плавать предмет вправо.

И мои другие div'ы должны следовать правилу flex, установленному родителем. 

Это возможно?

Если нет, как мне сделать float: right под flex?

32
Zhen Liu

Вы не можете использовать float внутри flex container, и причина в том, что свойство float не применяется к боксам flex-level, как вы можете видеть здесь Fiddle

Поэтому, если вы хотите расположить элемент child справа от элемента parent, вы можете использовать margin-left: auto, но теперь элемент child также будет толкать другой div вправо, как вы можете видеть здесь Fiddle

Теперь вы можете изменить порядок элементов и установить order: 2 для элемента child, чтобы он не влиял на второй div

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}
<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

69
Nenad Vracar

Вам не нужны поплавки. На самом деле, они бесполезны, потому что поплавки игнорируются в flexbox .

Вам также не нужно позиционирование CSS.

Доступно несколько гибких методов. auto поля были упомянуты в другой ответ .

Вот два других варианта:

  • Используйте justify-content: space-between и свойство order.
  • Используйте justify-content: space-between и измените порядок делений.

.parent {
    display: flex;
    justify-content: space-between;
}

.parent:first-of-type > div:last-child { order: -1; }

p { background-color: #ddd;}
<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div>another child </div>
</div>

<hr>

<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of 
             divs in the mark-up</p>

<div class="parent">
    <div>another child </div>
    <div class="child" style="float:right"> Ignore parent? </div>
</div>

12
Michael_B

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}
<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

мы можем обойтись без использования margin-left

1
bhargavi