플렉스 아이템을 오른쪽 정렬하는 방법? href=”#”>Home</a></div>

“Contact”를 사용하는 것보다 오른쪽에 맞추는 더 유연한 방법이 position: absolute있습니까?

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }
<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>

스 니펫 확장

http://jsfiddle.net/vqDK9/

답변

여기 요 설정 justify-content: space-between플렉스 컨테이너에.

.main {
    display: flex;
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }
<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
<!--     <div class="b"><a href="#">Some title centered</a></div> -->
    <div class="c"><a href="#">Contact</a></div>
</div>

스 니펫 확장

답변

보다 유연한 접근 방식은 auto왼쪽 여백 을 사용하는 것입니다 (flex 항목은 자동 여백을 블록 형식화 컨텍스트에서 사용될 때와 조금 다르게 처리합니다 ).

.c {
    margin-left: auto;
}

업데이트 된 바이올린 :

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

스 니펫 확장

답변

이를 위해 flexbox를 사용 display: flex하려면 컨테이너, flex: 1항목 및 text-align: right에서 수행 할 수 있어야합니다 .c.

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

… 또는 대안으로 (더 간단하게) 항목을 충족시킬 필요가 없으면 justify-content: space-between컨테이너에서 사용 하고 text-align규칙을 완전히 제거 할 수 있습니다 .

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

Codepen에 대한 데모 는 위의 내용을 신속하게 시도 할 수 있도록합니다.

답변

필러를 사용하여 나머지 공간을 채울 수도 있습니다.

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

3 가지 버전으로 솔루션을 업데이트했습니다. 이것은 추가 필러 요소를 사용하는 유효성에 대한 논의 때문입니다. 코드 스니핑을 실행하면 모든 솔루션이 다른 작업을 수행하는 것을 볼 수 있습니다. 예를 들어, 항목 b에서 필러 클래스를 설정하면이 항목이 나머지 공간을 채우게됩니다. 이는 클릭 할 수없는 ‘데드 (dead)’공간이 없다는 이점이 있습니다.

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="filler b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>



<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

스 니펫 확장

답변

아니면 그냥 사용할 수 있습니다 justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

답변

쉽게

.main {
    display: flex;
    flex-direction:row-reverse;
}

답변

스타일 시트에 다음 CSS 클래스를 추가하십시오.

.my-spacer {
    flex: 1 1 auto;
}

왼쪽의 요소와 오른쪽 정렬하려는 요소 사이에 빈 요소를 배치하십시오.

<span class="my-spacer"></span>