code

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

starcafe 2023. 4. 8. 09:04
반응형

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

'연락처'를 오른쪽 정렬하는 플렉스박스 같은 방법이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/

좀 더 유연한 접근법은 다음과 같습니다.auto왼쪽 여백(플렉스 항목에서는 자동 여백이 블록 형식 컨텍스트에서 사용되는 경우와 약간 다르게 처리됨).

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

여기 있어요.세트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>

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

<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에 필러 클래스를 설정하면 이 항목이 나머지 공간을 채웁니다.이는 클릭할 수 없는 '데드' 공간이 없다는 장점이 있습니다.

업데이트 : 디스플레이 그리드 포함 (재미만)

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

<div class="main-grid">
    <div class="a"><a href="#">Home</a></div>
    <div class="b text-centered"><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; }
.main-grid { display: grid; grid-template-columns: min-content 1fr min-content; }
.text-centered { text-align: center; }
.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; }

이것에 플렉스 박스를 사용하는 경우는, 이 조작을 실시해 주세요(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에 대한 데모를 소개합니다.

이만큼 쉽다

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

여백 왼쪽:자동은 정상적으로 동작합니다.그러나 깨끗한 플렉스 박스 솔루션은 메인 클래스 사이에 공간이 있을 것입니다.요소가 두 개 이상 있는 경우 간격이 잘 작동합니다.싱글 엘리먼트에 대한 솔루션도 추가했습니다.

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; padding: 0.25rem; margin: 0.25rem;}
.b { flex: 1; text-align: center; }

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

.c-wrapper2 {
  display: flex;
  flex: 1;
  flex-flow: row-reverse;
}
<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>

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="main">
    <div class="c-wrapper">
      <a class="c" href="#">Contact</a>
      <a class="c" href="#">Contact2</a>
    </div>
</div>
<div class="main">
    <div class="c-wrapper2">
      <span class="c">Contact</span>
      <span class="c">Contact2</span>
    </div>
</div>

스타일시트에 다음 CSS 클래스를 추가합니다.

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

왼쪽 요소와 오른쪽 정렬할 요소 사이에 빈 요소를 배치합니다.

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

한 항목을 왼쪽 정렬(헤더 등)하고 여러 항목을 오른쪽 정렬(예: 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뿐입니다).

여기에 이미지 설명 입력

가격 박스 컨테이너 내에서 'flex-end'가 작동했습니다.

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

Angular(각도) 및 Flex-Layout(플렉스 레이아웃)을 사용하는 경우 플렉스 항목 컨테이너에서 다음을 사용합니다.

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

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

플렉스 컨테이너에 '정당화 콘텐츠: 플렉스 엔드'를 추가하면 문제가 해결되지만, '정당화 콘텐츠: 스페이스-between'은 아무런 효과가 없습니다.

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>

언급URL : https://stackoverflow.com/questions/22429003/how-to-right-align-flex-item

반응형

'code' 카테고리의 다른 글

사용자가 DIV 바깥쪽을 클릭할 때 jQuery를 사용하여 DIV 숨기기  (0) 2023.04.08
SQL 쿼리에서 변수를 설정하는 방법  (0) 2023.04.08
SQL Developer에서 SQL Server 스토어드 프로시저를 실행하는 방법  (0) 2023.04.08
Array.Add vs +=  (0) 2023.04.08
PowerShell에서 어레이의 모든 개체에서 하나의 속성 값 선택  (0) 2023.04.08

'code'의 다른글

  • 현재글플렉스 아이템을 오른쪽 정렬하는 방법

관련글

댓글

티스토리툴바