Flexbox 열을 왼쪽과 오른쪽으로 정렬하는 방법은 무엇입니까?

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>

추가할 수 있습니다.justify-content: space-between상위 요소로 이동합니다.이렇게 하면 어린이 플렉스 박스 항목이 공간을 사이에 두고 반대쪽으로 정렬됩니다.

업데이트된 예

#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가지 방법을 생각해냈습니다.여기 데모가 있습니다.

방법 1:

#a {
    margin-right: auto;
}

방법 2:.

#a {
    flex-grow: 1;
}

방법 3:

#b {
    margin-left: auto;
}

방법 4:

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

다른 옵션은 다음을 사용하여 다른 태그를 추가하는 것입니다.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: 11 auto)와 동일하며, 주축을 따라 추가 공간을 흡수합니다.

다양한 방법이 있지만 가장 간단한 방법은 공간을 사용하는 것입니다. 마지막에 있는 예제를 참조하십시오.

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

예를 보다

Jost의 답변 외에도 세로 정렬이 필요한 경우 다음을 사용합니다.align-items: center;필요한 경우에는

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

언급URL : https://stackoverflow.com/questions/28922126/how-to-align-flexbox-columns-left-and-right