Делаем гибкий элемент плавным

103

у меня есть

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

У родителя есть

.parent {
    display: flex;
}

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

И другие мои div, чтобы следовать правилу гибкости, установленному родителем.

Возможно ли это?

Если нет, как мне сделать float: rightнедогружение?

html css flexbox Чжэнь Лю
источник

Ответы:

194

Вы не можете использовать floatвнутренний гибкий контейнер, и причина в том, что свойство float не применяется к блокам гибкого уровня, как вы можете видеть здесь 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>
Развернуть фрагмент

Ненад Врачар
источник
Спасибо, я могу взглянуть на первое решение. Я не хочу использовать display: absolute, поскольку другие мои дети не должны подпадать под первого ребенка.
Zhen Liu
4
« поплавки не вторгаются в гибкий контейнер ». Это правда, но причина не в этом. Причина в том, что floatсвойство не распространяется на блоки гибкого уровня.
Oriol
Это работает, спасибо! Почему justify-self: end;(или что-то подобное) не работает для ребенка? Это похоже на не очень гибкое решение проблемы с flexbox.
Брэди Даулинг
1
@BradyDowling Я знаю, что это запоздалый ответ, но для завершения justify-self требуется, чтобы дисплей был настроен на сетку. Flexbox игнорирует justify-self: end. См. Здесь: developer.mozilla.org/en-US/docs/Web/CSS/justify-self
Пол
<DIV> другой ребенок </ DIV> <DIV класс = "ребенок"> Игнорировать родителей </ DIV> U может поменять два DIV и без порядка 2 он тоже работает?
yeeen
23

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

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

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

Вот еще два варианта:

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

.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>
Развернуть фрагмент

Майкл Бенджамин
источник