플렉스 박스 요소 중앙 및 오른쪽 정렬

플렉스 박스 요소 중앙 및 오른쪽 정렬

---

나는 중간에 정렬 A B하고 싶습니다 C.

D완전히 오른쪽으로 이동하려면 어떻게 해야합니까?

전에:

후:

이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
li:last-child {
  background: #ddd;
  /* magic to throw to the right*/
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

https://jsfiddle.net/z44p7bsx/

---

다음은이 레이아웃을 달성하기위한 5 가지 옵션입니다.

• CSS 포지셔닝
• 보이지 않는 DOM 요소가있는 Flexbox
• 보이지 않는 의사 요소가있는 Flexbox
• Flexbox flex: 1
• CSS 그리드 레이아웃

---

방법 # 1 : CSS 위치 지정 속성

position: relative플렉스 용기에 바릅니다 .

position: absolute항목 D에 적용하십시오 .

이제이 항목은 플렉스 컨테이너 내에 절대적으로 위치합니다.

더 구체적으로 말하면, 항목 D는 문서 흐름에서 제거되지만 가장 가까운 위치에 있는 상위 항목의 경계 내에 있습니다.

CSS의 오프셋 속성을 사용 top하고 right위치로이 요소를 이동합니다.

li:last-child {
  position: absolute;
  top: 0;
  right: 0;
  background: #ddd;
}
ul {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p {
  text-align: center;
  margin-top: 0;
}
span {
  background-color: aqua;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

이 방법에 대한 한 가지주의 사항 은 일부 브라우저가 정상적인 흐름에서 절대적으로 배치 된 플렉스 항목을 완전히 제거하지 못할 수 있다는 것입니다. 이것은 비표준적이고 예기치 않은 방식으로 정렬을 변경합니다. 자세한 내용 : 절대적으로 배치 된 플렉스 항목은 IE11의 일반 흐름에서 제거되지 않습니다.

---

방법 # 2 : Flex Auto Margins & Invisible Flex Item (DOM 요소)

auto여백 과 새롭고 보이지 않는 플렉스 아이템의 조합으로 레이아웃을 얻을 수 있습니다.

새 플렉스 항목은 항목 D와 동일하며 반대쪽 끝 (왼쪽 가장자리)에 배치됩니다.

보다 구체적으로, 플렉스 정렬은 여유 공간의 분포를 기반으로하기 때문에 새 항목은 세 개의 중간 상자를 수평 중앙에 유지하는 데 필요한 균형입니다. 새 항목은 기존 D 항목과 너비가 같아야합니다. 그렇지 않으면 가운데 상자가 정확하게 가운데에 배치되지 않습니다.

새 항목이와 함께보기에서 제거됩니다 visibility: hidden.

요컨대 :

• D요소 의 복제본을 만듭니다 .
• 목록의 시작 부분에 배치하십시오.
• 사용은 플렉스 auto유지하기 위해 마진을 A, B와 C함께, 중심 D요소가 양쪽에서 동일한 균형을 만들어.
• visibility: hidden중복에 적용D

li:first-child {
  margin-right: auto;
  visibility: hidden;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

<ul>
  <li>D</li><!-- new; invisible spacer item -->
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

---

방법 # 3 : Flex Auto Margins 및 Invisible Flex Item (의사 요소)

이 방법은 의미 상 더 깨끗하고 너비를 D알아야한다는 점을 제외하면 # 2와 유사 합니다.

• 너비가 같은 의사 요소를 만듭니다 D.
• 로 용기의 시작 부분에 놓습니다 ::before.
• 플렉스 사용 auto유지하기 위해 마진을 A, B그리고 C의사와 함께 완벽 중심 D요소가 양쪽에서 동일한 균형을 만들어.

ul::before {
  content:"D";
  margin: 1px auto 1px 1px;
  visibility: hidden;
  padding: 5px;
  background: #ddd;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

---

방법 # 4 : flex: 1왼쪽 및 오른쪽 항목에 추가

위의 방법 # 2 또는 # 3부터 시작하여 동일한 균형을 유지하기 위해 왼쪽 및 오른쪽 항목에 대해 동일한 너비에 대해 걱정하는 대신 각각에 flex: 1. 이렇게하면 둘 다 사용 가능한 공간을 소비하게되어 가운데 항목이 중앙에 위치하게됩니다.

그런 다음 display: flex콘텐츠를 정렬하기 위해 개별 항목에 추가 할 수 있습니다 .

이 방법을 min-height다음 과 함께 사용하는 방법에 대한 참고 사항 : 현재 Chrome, Firefox, Edge 및 기타 브라우저에서 축약 형 규칙flex: 1은 다음과 같이 분류됩니다.

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0%

즉 백분율 단위 (%) 에있는 flex-basis경우의 원인이 방법 깰 min-height용기에 사용된다. 이는 일반적으로 자식에 대한 백분율 높이 height에는 부모에 대한 명시 적 속성 설정이 필요하기 때문 입니다.

이것은 1998 년 ( CSS Level 2 )으로 거슬러 올라가는 오래된 CSS 규칙 으로, 어느 정도는 여전히 많은 브라우저에서 유효합니다. 자세한 내용은 여기 와 여기를 참조 하십시오 .

다음은 user2651804 의 댓글에 게시 된 문제의 그림입니다 .

#flex-container {
  display: flex;
  flex-direction: column;
  background: teal;
  width: 150px;
  min-height: 80vh;
  justify-content: space-between;
}

#flex-container>div {
  background: orange;
  margin: 5px;
}

#flex-container>div:first-child {
  flex: 1;
}

#flex-container::after {
  content: "";
  flex: 1;
}

<div id="flex-container">
  <div>very long annoying text that will add on top of the height of its parent</div>
  <div>center</div>
</div>

해결책은 백분율 단위를 사용하지 않는 것입니다. 시도 px하거나 전혀 시도 하지 마십시오 ( 적어도 주요 브라우저 중 일부는 어떤 이유로 든 백분율 단위를 추가 했음에도 불구하고 사양이 실제로 권장 하는 것입니다).

#flex-container {
  display: flex;
  flex-direction: column;
  background: teal;
  width: 150px;
  min-height: 80vh;
  justify-content: space-between;
}

#flex-container > div {
  background: orange;
  margin: 5px;
}


/* OVERRIDE THE BROWSER SETTING IN THE FLEX PROPERTY */

#flex-container > div:first-child {
  flex: 1;
  flex-basis: 0;
}

#flex-container::after {
  content: "";
  flex: 1;
  flex-basis: 0;
}


/* OR... JUST SET THE LONG-HAND PROPERTIES INDIVIDUALLY

#flex-container > div:first-child {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#flex-container::after {
  content: "";
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
 */

<div id="flex-container">
  <div>very long annoying text that will add on top of the height of its parent</div>
  <div>center</div>
</div>

---

방법 # 5 : CSS 그리드 레이아웃

이것은 가장 깨끗하고 효율적인 방법 일 수 있습니다. 절대 위치 지정, 가짜 요소 또는 기타 해커가 필요하지 않습니다.

여러 열이있는 그리드를 생성하기 만하면됩니다. 그런 다음 항목을 중간 및 끝 열에 배치하십시오. 기본적으로 첫 번째 열은 비워 둡니다.

ul {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  grid-column-gap: 5px;
  justify-items: center;
}

li:nth-child(1) { grid-column-start: 2; }
li:nth-child(4) { margin-left: auto; }

/* for demo only */
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 5px; background: #aaa; }
p  { text-align: center; }

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>| true center |</span></p>

---

정렬하려면 빈 범위를 연결하고 세 개의 하위 범위를 분할하면됩니다.

---

아주 명확한 질문입니다. 몇 시간을 파고 나서 답변을 게시 할 수밖에 없었습니다. 테이블, 테이블 셀, 절대 위치, 변환으로이 문제를 해결할 수 있었지만 flexbox로 해결해야했습니다. :)

.parent {
  display: flex;
  justify-content: flex-end;
}

.center {
  margin: auto;
}

http://codepen.io/rgfx/pen/BLorgd

---

나는 Michael_B 의 대답을 확장했습니다.

.center-flex__2-of-3 > :nth-child(1), .center-flex__2-of-3 > :nth-child(3) {
  flex: 1;
}
.center-flex__2-of-3 > :nth-child(1) {
  justify-content: flex-start;
}
.center-flex__2-of-3 > :nth-child(3) {
  justify-content: flex-end;
}
.center-flex__1-of-2 > :nth-child(1) {
  margin: auto;
}
.center-flex__1-of-2 > :nth-child(2) {
  flex: 1;
  justify-content: flex-end;
}
.center-flex__2-of-2 > :nth-child(1) {
  flex: 1;
  justify-content: flex-start;
}
.center-flex__2-of-2 > :nth-child(2) {
  margin: auto;
}
.center-flex__1-of-2:before, .center-flex__1-of-1:before {
  content: '';
  flex: 1;
}
.center-flex__1-of-1:after, .center-flex__2-of-2:after {
  content: '';
  flex: 1;
}

[class*=center-flex] {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 10px solid rgba(0, 0, 0, 0.1);
}
[class*=center-flex] > * {
  display: flex;
}
li {
  padding: 3px 5px;
}

2 of 3
<ul class="center-flex__2-of-3">
  <span>
    <li>Accusamus</li>
    <li>Porro</li>
  </span>
  <span>
    <li>Lorem</li>
    <li>Dolor</li>
  </span>
  <span>
    <li>Porro</li>
    <li>Culpa</li>
    <li>Sit</li>
  </span>
</ul>

<br><br>
1 of 2
<ul class="akex center-flex__1-of-2">
  <span>
    <li>Lorem</li>
    <li>Dolor</li>
  </span>
  <span>
    <li>Porro</li>
    <li>Culpa</li>
    <li>Sit</li>
  </span>
</ul>

<br><br>
2 of 2
<ul class="akex center-flex__2-of-2">
  <span>
    <li>Porro</li>
    <li>Culpa</li>
    <li>Sit</li>
  </span>
  <span>
    <li>Lorem</li>
    <li>Dolor</li>
  </span>
</ul>

<br><br>
1 of 1
<ul class="center-flex__1-of-1">
  <span>
    <li>Lorem</li>
    <li>Dolor</li>
  </span>
</ul>

여기 SASS를 코드 펜으로 사용하여

---

display:grid접근 방식을 사용하면 모든 ul자식을 동일한 셀에 넣은 다음 다음을 설정할 수 있습니다 justify-self.

ul {
  display: grid;
}

ul > * {
  grid-column-start: 1;
  grid-row-start: 1;
  justify-self:center;
}

ul > *:last-child {
  justify-self: right;
}

/* Make Fancy */
li {
  display:inline-block;
  margin: 1px;
  padding: 5px;
  background: #bbb;
}

<ul>
  <span>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  </span>
  <li>D</li>
</ul>

---

그리드 템플릿 영역을 사용할 수 있고 가짜 요소없이 할 수 있기 때문에 허용되는 대답은 약간 변경 될 수 있습니다.

grid-template-areas '. b c'
grid-template-columns: 1fr 1fr 1fr

참고 URL : https://stackoverflow.com/questions/38948102/center-and-right-align-flexbox-elements