플렉스 아이템을 오른쪽 정렬하는 방법?

681

"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/

html css flexbox

— 마크 볼더
소스

2

float를 올바르게 사용할 수 있지만 같은 방식입니다 ...! 가장 좋은 방법은 텍스트 정렬이있는 표시 테이블을 사용하는 것입니다.

— Yohann Tilotti

물론 더 낫습니다. : 아직도 문제가 오른쪽 정렬 "연락처"비록 가진 jsfiddle.net/vqDK9/1

— 마크 보울

2

나는 당신의 바이올린 업데이트 jsfiddle.net/vqDK9/2

— 요한 디 Tilotti

최소한 두 가지 방법이 있습니다 : stackoverflow.com/a/33856609/3597276

— Michael Benjamin

454

여기 요 설정 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>

스 니펫 확장

— 케빈 서틀
소스

291

또는justify-content: flex-end

— BT

1

너비를 .c로 300px로 설정하십시오. 제목이 더 이상 중앙에 있지 않습니다. 그렇습니다. 이것은 질문에 대답하지만 디자인을 깨뜨립니다.

— Agamemnus

22

.c::after의사 요소 가있는 경우와 같이 항상 예상대로 작동하지는 않습니다 . 내 경험으로 margin-left: auto;는 갈 길입니다.

— 윌

13

또는flex-flow: row-reverse;

— jchook 1

8

Flex 컨테이너에 하나의 항목 만 정렬하지 않으려는 경우 이것이 정답이라고 생각하지 않습니다.

— Foxhoundn

1097

보다 유연한 접근 방식은 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>

스 니펫 확장

— 떠돌아
소스

2

감사. 위의 Yohann Tilotti의 디스플레이 테이블 방법보다 개인적으로 선호합니까? 그렇다면 왜 그렇습니까?

— Mark Boulder

4

@ MarkBoulder : 호환성상의 이유로 그의 방법이 더 좋지만 이미 flexbox를 사용하고 있다면 내 대답이 더 합리적입니다.

— adrift March

4

@MarkBoulder :이 경우에도 같은 일을 수행합니다. 장점은 (테이블 접근 방식이없는 것을 플렉스 항목과 관련된 다른 특성 (행동)을 갖는 것 flex, order등).

— adrift

3

요소를 줄 바꿈 할 수없고 마지막 세 개의 오른쪽을 플로팅해야하는 경우이 margin-left: auto;스타일을 사용 하여 마지막 세 번째를 대상으로 지정하십시오 .

— Daniel Sokolowski

2

@Justin은 그것을 알아낼 필요가 없었으며 포장 할 필요가 없었습니다. 내 경우에는 할 수 없었습니다. 해결책은로만 세 항목 중 첫 번째 항목을 타겟팅하는 것이 었습니다 margin-left: auto;.

— Daniel Sokolowski

41

이를 위해 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에 대한 데모 는 위의 내용을 신속하게 시도 할 수 있도록합니다.

— 닉 F
소스

2

space-between내가 찾던 것이 바로 고마워요!

— Eddie Fletcher

두 번째 제안을 사용할 때 경계가 사라집니다. 예상 동작? codepen.io/oshihirii/pen/RygKRd

— user1063287

38

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

<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>

스 니펫 확장

— 아르노
소스

3

마지막으로 flexbox를 이해하는 사람

— Kokodoko

9

@Kokodoko 네, 또 다른 의미없는 html 요소를 사용하여 다른 요소를 옮기는 것이 flexbox를 이해하는 최고입니다 ...

— Zanshin13

@ Zanshin13 다른 답변은 너무 많은 여분의 CSS를 작성하여 플렉스 컨테이너를 남기고 모든 것을 직접 코딩 할 수 있습니다 :)

— Kokodoko

2

@Kokodoko justify-content: space-between는 "정말 많이"CSS입니까? 추가 의견이 필요하지 않습니다 (하지만 원하는 경우 채팅을 환영합니다). 이 때문에 답은 여기에있을 수있는 권리를 가지고 있습니다 솔루션. 그러나 확실히 최적의 것은 아닙니다 . Idk, 아마 당신은 눈치 채지 못했지만 다른 답변의 CSS 대부분은 OP이며 실제로 답변은 저자의 CSS 양을 조금 줄입니다. 이 답변에는 다른 CSS보다 적은 CSS가 없습니다 (OP의 css-jsfiddle.net/63ma3b56 없이는 작동하지 않음 ). 그러나 html 요소가 하나 더 있습니다.

— 잔신 13

32

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

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

— 멜 키아
소스

3

justify-content: 속성은 플렉스 컨테이너의 속성, 크리스 Coyer의 너무 유연하다는 쪽지를 참조 css-tricks.com/snippets/css/a-guide-to-flexbox

— Weij 데르 클라스 반을

1

이것이 나를 위해 일한이 페이지의 유일한 솔루션입니다.

— user2847376

19

쉽게

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

— 세스코
소스

12

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

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

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

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

— 안드레스 로브
소스

단일 요소를 오른쪽에 맞추고 싶지 않고 한 요소를 왼쪽에 맞추고 다른 요소를 (동일한 플렉스 레이아웃 내에서) 오른쪽에 맞추고 자하는 사람들에게는 이것이 방법입니다!

— Sensei James

8

하나의 항목을 왼쪽 정렬 (예 : 머리글)해야하지만 여러 항목을 오른쪽 정렬 (예 : 3 개의 이미지)해야하는 경우 다음과 같이합니다.

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

다음은 그 모양입니다 (위의 스 니펫에는 관련 CSS 만 포함됨)

— 테트라 데브
소스

6

'justify-content : flex-end'는 가격 상자 컨테이너 내에서 작동했습니다.

.price-box {
    justify-content: flex-end;
}

— 모하마드 아델
소스

4

flex 컨테이너에 'justify-content : flex-end'를 추가하면 문제가 해결되는 반면 'justify-content : space-between'은 아무것도하지 않습니다.

— 밤
소스

2

Angular 및 Flex-Layout을 사용하는 사용자는 flex-item 컨테이너에서 다음을 사용하십시오.

<div fxLayout="row" fxLayoutAlign="flex-end">

여기 fxLayoutAlign 문서 와 전체 fxLayout 문서를 참조하십시오 .

— 린다 우손
소스

0

TetraDev의 답변 을 기반으로 한 예제 코드

오른쪽 이미지 :

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

스 니펫 확장

왼쪽 이미지 :

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>

스 니펫 확장

— 1.21 기가 와트
소스