Как выровнять столбцы flexbox слева и справа?

123

С помощью типичного CSS я мог бы разместить один из двух столбцов влево, а другой вправо с небольшим промежутком между ними. Как мне это сделать с помощью flexbox?

http://jsfiddle.net/1sp9jd32/

#container {
  width: 500px;
  border: solid 1px #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#a {
  width: 20%;
  border: solid 1px #000;
}
#b {
  width: 20%;
  border: solid 1px #000;
  height: 200px;
}

<div id="container">
  <div id="a">
    a
  </div>
  <div id="b">
    b
  </div>
</div>

Развернуть фрагмент

html css flexbox

— archytect
источник

279

Вы можете добавить justify-content: space-betweenк родительскому элементу. При этом дочерние элементы flexbox будут выровнены по противоположным сторонам с промежутком между ними.

Обновленный пример

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

Показать фрагмент кода

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#a {
    width: 20%;
    border: solid 1px #000;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Развернуть фрагмент

Вы также можете добавить margin-left: autoко второму элементу, чтобы выровнять его по правому краю.

Обновленный пример

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

Показать фрагмент кода

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
}

#a {
    width: 20%;
    border: solid 1px #000;
    margin-right: auto;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Развернуть фрагмент

— Джош Крозье
источник

4

Привет, не могли бы вы объяснить, как элемент правильно выравнивается с помощью margin-left: autoздесь?

— hulkinBrain

2

@hulkinBrain, вот объяснение: stackoverflow.com/a/33856609/3597276

— Майкл Бенджамин,

2

ПРИМЕЧАНИЕ: margin-left: autoи margin-right: autoуловка несовместима с IE11, для тех, кому еще нужно его поддерживать.

— TetraDev

30

Я придумал 4 метода достижения результата. Вот демо

Способ 1:

#a {
    margin-right: auto;
}

Способ 2:

#a {
    flex-grow: 1;
}

Способ 3:

#b {
    margin-left: auto;
}

Метод 4:

#container {
    justify-content: space-between;
}

— geniuscarrier
источник

9

Метод 5: вставьте лишний пустой элемент flex:1;там, где вы хотите, чтобы было дополнительное пространство :)

— adamdport 06

Это был бы лучший и наиболее полный ответ, если бы вы встроили фрагмент кода вместо ссылки на jsfiddle.

— Styfle 06

Метод 1 и 3 несовместим с IE 11!

— Питер Хёйлунд Андерсен

1

Другой вариант - добавить еще один тег со flex: autoстилем между тегами, который вы хотите заполнить оставшимся пространством.

https://jsfiddle.net/tsey5qu4/

HTML:

<div class="parent">
  <div class="left">Left</div>
  <div class="fill-remaining-space"></div>
  <div class="right">Right</div>
</div>

CSS:

.fill-remaining-space {
  flex: auto;
}

Это эквивалентно функции flex: 1 1 auto, которая поглощает лишнее пространство вдоль главной оси.

— konyak
источник

0

Есть разные способы, но проще всего использовать пробел между ними, см. Пример в конце

#container {    
    border: solid 1px #000;
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
}

.item {
    width: 20%;
    border: solid 1px #000;
    text-align: center;
}

см. пример

— Али Адрави
источник