колонки на основе совместите левый и правый

изучая, как использовать flexbox, с типичным 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>
3 56
html css css3 flexbox

3 ответа:

вы могли бы добавить 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>
145

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

Способ 1:

#a {
    margin-right: auto;
}

Способ 2:

#a {
    flex-grow: 1;
}

Способ 3:

#b {
    margin-left: auto;
}

Способ 4:

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

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

#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;
}

пример

0