CSS Flexbox에서 "justify-items"및 "justify-self"속성이없는 이유는 무엇입니까?

플렉스 컨테이너의 주축과 횡축을 고려하십시오.

                                                                                                                                                   _{출처 : W3C}

주축을 따라 플렉스 항목을 정렬하려면 하나의 속성이 있습니다.

• justify-content

가로축을 따라 플렉스 항목을 정렬하려면 세 가지 속성이 있습니다.

• align-content
• align-items
• align-self

위 이미지에서 주축은 가로이고 가로축은 세로입니다. 이것이 플렉스 컨테이너의 기본 방향입니다.

그러나 이러한 방향은 flex-direction속성 과 쉽게 교환 할 수 있습니다 .

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(십자 축은 항상 주 축에 수직입니다.)

축의 작동 방식을 설명하는 데있어 요점은 어느 방향에도 특별한 것이없는 것 같습니다. 주축, 횡축은 모두 중요 도면에서 동일 flex-direction하며 앞뒤로 쉽게 전환 할 수 있습니다.

그렇다면 왜 크로스 축에 두 개의 추가 정렬 속성이 생깁니 까?

왜 align-content및 align-items주요 축에 대한 하나 개의 속성에 통합?

주축에 justify-self속성이 없는 이유는 무엇 입니까?

이러한 속성이 유용한 시나리오 :

• 플렉스 컨테이너의 모서리에 플렉스 아이템 배치
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 플렉스 항목 그룹을 오른쪽 맞춤 ( justify-content: flex-end)으로 만들지 만 첫 번째 항목을 왼쪽으로 정렬 ( justify-self: flex-start)

  탐색 항목 그룹과 로고가있는 헤더 섹션을 고려하십시오. 함께 justify-self로고는 탐색 항목 오른쪽 유지하면서 왼쪽으로 정렬하고, 다른 화면 크기에 원활하게 모든 일을 조정합니다 ( "노끈") 할 수있다.

• 3 개의 플렉스 품목의 행에서 중간 품목을 용기 중앙에 부착하고 ( justify-content: center) 인접한 품목을 용기 모서리 ( justify-self: flex-start및 justify-self: flex-end)에 맞 춥니 다 .

  값주의 space-around와 space-between에 justify-content인접한 항목마다 폭이 다를 경우, 해당 건물이 중간 항목을 보관하지 않습니다 컨테이너 중심으로.

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFiddle 버전

이 글을 쓰는 현재의 언급이없는 justify-self또는 justify-items에서 인 flexbox 사양 .

그러나 모든 상자 모델에 사용할 공통 정렬 속성 세트를 설정하기위한 W3C의 미완성 제안 인 CSS Box Alignment Module 에는 다음이 있습니다.

                                                                                                                                                   _{출처 : W3C}

당신은 그것을 알 수 있습니다 justify-self및 justify-items... 고려되고 있지만 인 flexbox에 대한 .

나는 주요 질문을 반복하여 끝낼 것이다.

"justify-items"및 "justify-self"속성이없는 이유는 무엇입니까?

주축을 따라 플렉스 아이템을 정렬하는 방법

질문에 명시된 바와 같이 :

주축을 따라 플렉스 항목을 정렬하려면 하나의 속성이 있습니다. justify-content

십자가 축을 따라 정렬 플렉스 항목에이 세 가지 속성은 다음과 같습니다 align-content, align-items그리고align-self .

그런 다음 질문은 묻습니다.

왜이없는 justify-items및 justify-self속성?

한 가지 대답은 다음과 같습니다 . 필요하지 않기 때문입니다.

인 flexbox 사양을 제공하는 두 개의 주요 축을 따라 플렉스 항목을 정렬하는 방법을 :

1. justify-content키워드 재산 및
2. auto 여백

정당한 내용

이 justify-content속성은 플렉스 컨테이너의 주축을 따라 플렉스 항목을 정렬합니다.

플렉스 컨테이너에 적용되지만 플렉스 항목에만 영향을줍니다.

5 가지 정렬 옵션이 있습니다.

• flex-start ~ Flex 품목은 라인의 시작 부분으로 포장됩니다.

  

• flex-end ~ Flex 품목은 라인 끝쪽으로 포장됩니다.

  

• center ~ Flex 품목은 라인 중앙을 향하여 포장됩니다.

  

• space-between~ Flex 항목의 간격이 균일하고 첫 번째 항목이 컨테이너의 한쪽 가장자리에 정렬되고 마지막 항목이 반대쪽 가장자리에 정렬됩니다. 첫번째와 마지막 항목에 의해 사용되는 에지에 의존 flex-direction하고 기록 모드 ( ltr또는 rtl).

  

• space-around~ space-between양쪽에 절반 크기의 공간을 제외하고는 동일 합니다.

  

자동 여백

auto여백을 사용하면 플렉스 항목을 중앙에 배치하거나 간격을 두거나 하위 그룹으로 묶을 수 있습니다.

justify-content플렉스 컨테이너에 적용 되는와 달리 auto마진은 플렉스 항목에 적용됩니다.

지정된 방향으로 모든 여유 공간을 소비하여 작동합니다.

플렉스 항목 그룹을 오른쪽에 정렬하고 첫 번째 항목을 왼쪽에 정렬

질문의 시나리오 :

• 플렉스 항목 그룹을 오른쪽 맞춤 ( justify-content: flex-end)으로 만들지 만 첫 번째 항목을 왼쪽으로 정렬 ( justify-self: flex-start)

  탐색 항목 그룹과 로고가있는 헤더 섹션을 고려하십시오. 함께 justify-self로고는 탐색 항목 오른쪽 유지하면서 왼쪽으로 정렬하고, 다른 화면 크기에 원활하게 모든 일을 조정합니다 ( "노끈") 할 수있다.

다른 유용한 시나리오 :

구석에 플렉스 아이템 배치

질문의 시나리오 :

• 구석에 플렉스 아이템 배치 .box { align-self: flex-end; justify-self: flex-end; }

플렉스 아이템을 수직 및 수평 중앙에 배치

margin: autojustify-content: center및 의 대안 align-items: center입니다.

플렉스 컨테이너에서이 코드 대신 :

.container {
    justify-content: center;
    align-items: center;
}

flex 아이템에서 이것을 사용할 수 있습니다 :

.box56 {
    margin: auto;
}

이 대안은 컨테이너를 오버플로하는 플렉스 항목을 가운데에 배치 할 때 유용합니다 .

플렉스 아이템을 중앙에 배치하고 첫 번째와 가장자리 사이에 두 번째 플렉스 아이템을 중앙에 배치합니다

플렉스 컨테이너는 여유 공간을 분배하여 플렉스 항목을 정렬합니다.

따라서 동일한 균형 을 만들려면 중간 항목을 단일 항목과 함께 컨테이너의 중앙에 배치하려면 카운터 밸런스를 도입해야합니다.

아래의 예에서, "실제"아이템 (박스 63 및 66)의 균형을 맞추기 위해 보이지 않는 제 3 플렉스 아이템 (박스 61 및 68)이 소개된다.

물론,이 방법은 의미 론적으로는 아무 것도 아닙니다.

또는 실제 DOM 요소 대신 의사 요소를 사용할 수 있습니다. 또는 절대 위치를 사용할 수 있습니다. 세 가지 방법이 여기에 포함됩니다 센터와 하단 정렬 플렉스 항목을

참고 : 위의 예는 가장 바깥 쪽 항목의 높이 / 폭이 동일한 경우에만 실제 중심으로 작동합니다. 플렉스 항목의 길이가 다른 경우 다음 예를 참조하십시오.

인접한 항목의 크기가 다를 때 플렉스 항목을 중앙에 배치

질문의 시나리오 :

• 3 개의 플렉스 품목의 행에서 중간 품목을 용기 중앙에 부착하고 ( justify-content: center) 인접한 품목을 용기 모서리 ( justify-self: flex-start및 justify-self: flex-end)에 맞 춥니 다 .

  값주의 space-around와 space-between에 justify-content인접한 항목이 서로 다른 폭을 (있는 경우 속성이 중간 항목을 보관하지 않습니다 컨테이너의 관계를 중심으로 데모 참조 ).

언급 한 바와 같이, 모든 플렉스 아이템의 너비 또는 높이가 동일하지 않으면 (에 따라 flex-direction) 중간 아이템을 실제로 중앙에 배치 할 수 없습니다. 이 문제는 justify-self속성을 강력하게 보여줍니다 (물론 작업을 처리하도록 설계됨).

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

이 문제를 해결하는 두 가지 방법이 있습니다.

솔루션 # 1 : 절대 위치

flexbox 사양 은 플렉스 아이템의 절대 위치를 허용 합니다 . 따라서 형제의 크기에 관계없이 중간 항목을 완벽하게 중앙에 배치 할 수 있습니다.

절대적으로 배치 된 모든 요소와 마찬가지로 항목이 문서 흐름 에서 제거됩니다 . 즉, 컨테이너에서 공간을 차지하지 않고 형제와 겹칠 수 있습니다.

아래 예에서 가운데 ​​항목은 절대 위치에 중심이 있고 외부 항목은 계속 흐릅니다. 그러나 같은 레이아웃을 역순으로 달성 할 수 있습니다. 중간 항목을 중앙에 justify-content: center배치하고 외부 항목을 절대로 배치하십시오.

솔루션 # 2 : 중첩 된 플렉스 컨테이너 (절대 위치 지정 없음)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

작동 방식은 다음과 같습니다.

• 최상위 div ( .container)는 플렉스 컨테이너입니다.
• 각 자식 div ( .box)는 이제 플렉스 항목입니다.
• 컨테이너 공간을 균등하게 분배하기 위해 각 .box항목이 제공 flex: 1됩니다.
• 이제 항목이 행의 모든 ​​공간을 소비하고 너비가 같습니다.
• 각 항목을 (중첩) 플렉스 컨테이너로 만들고를 추가하십시오 justify-content: center.
• 이제 각 span요소는 중심 플렉스 아이템입니다.
• 플렉스 auto마진을 사용 하여 바깥 쪽을 span왼쪽과 오른쪽 으로 이동하십시오 .

또한 여백을 독점적으로 버리고 justify-content사용할 수 있습니다 auto.

그러나 여백이 항상 우선 justify-content하므로 여기에서 작동 할 수 있습니다 auto. 사양에서 :

8.1. auto 여백 정렬

를 통해 정렬하기 이전 justify-content하고 align-self, 양의 여유 공간은 해당 차원에서 자동 마진에 배포됩니다.

정당화 내용 : 공간 동일 (개념)

justify-content잠시 후에 다시 한 번 더 옵션에 대한 아이디어가 있습니다.

• space-same~의 하이브리드 space-between및 space-around. 플렉스 항목은 space-between양쪽 끝의 절반 크기 공간 대신 ​​( space-around) 양쪽 끝의 전체 크기 공간이 있다는 점을 제외하고 는 균등 한 간격 (같은 ) 입니다.

이 레이아웃은 달성 할 수 ::before와 ::after플렉스 컨테이너 의사 요소.

^{(제공 : @oriol 코드에 대한, 그리고 @crl 라벨 용)}

업데이트 : 브라우저가 구현을 시작 space-evenly하여 위의 작업을 수행합니다. 이 내용은 게시물을 참조 플렉스 항목 간의 평등 한 공간을

PLAYGROUND (위의 모든 예제에 대한 코드 포함)

나는 이것이 답이 아니라는 것을 알고 있지만 가치있는 일을 위해이 문제에 기여하고 싶습니다. 그들이 justify-selfflexbox를 유연하게 만들기 위해 릴리스 할 수 있다면 좋을 것 입니다.

축에 여러 항목이있을 때 가장 논리적으로 justify-self행동하는 방법은 아래에 설명 된 것처럼 가장 가까운 이웃 (또는 가장자리)에 맞추는 것입니다.

W3C가 이것을 주목하고 적어도 고려할 것입니다. =)

이렇게하면 왼쪽 및 오른쪽 상자의 크기에 관계없이 실제로 중심에있는 항목을 가질 수 있습니다. 상자 중 하나가 중앙 상자의 지점에 도달하면 더 이상 분배 할 공간이 없을 때까지 상자를 밀어 넣습니다.

멋진 레이아웃을 쉽게 만들 수있는 것은 끝이 없습니다.이 "복잡한"예제를 살펴보십시오.

이것은 www 스타일 목록에서 요청되었으며 Tab Atkins (사양 편집기) 는 이유를 설명하는 답변을 제공했습니다 . 여기에 좀 더 자세히 설명하겠습니다.

먼저 플렉스 컨테이너가 한 줄 ( flex-wrap: nowrap) 이라고 가정 해 봅시다 . 이 경우 주축과 횡축 사이에 정렬 차이가 분명히 있습니다. 주축에는 여러 항목이 쌓이지 만 횡축에는 하나의 항목 만 쌓입니다. 따라서 교차 축에 항목별로 "자체 정렬"을 사용자 정의하는 것이 좋습니다 (각 항목은 자체적으로 개별적으로 정렬되므로). 주 축에서는 의미가 없습니다. 항목이 일괄 적으로 정렬됩니다.

멀티 라인 플렉스 박스의 경우, 동일한 "논리 라인"에 동일한 논리가 적용됩니다. 주어진 선에서 항목은 가로 축에서 개별적으로 정렬됩니다 (십자선에는 한 줄에 하나의 항목 만 있기 때문에).

여기를 같이 분석의 또 다른 방법이있다 : 그래서, 모두 의 *-self및 *-content속성을 가지 주위에 여분의 공간을 배포하는 방법에 대한 있습니다. 그러나 중요한 차이점은 *-self버전은 해당 축에 단일 항목 만있는 경우에 대한 것이고 버전은 해당 축 에 많은 항목*-content 이있을 때에 대한 것입니다 . 일대 다 시나리오는 여러 가지 유형의 문제이므로 서로 다른 유형의 옵션을 사용할 수 있습니다. 예를 들어, space-around/ space-between값은에 적합 *-content하지만 그렇지 않습니다 *-self.

SO : flexbox의 주축에는 공간을 분산시키는 것이 많이 있습니다. 따라서 *-content속성은 의미가 있지만 속성은 아닙니다 *-self.

반대로, 횡축에는 a *-self와 *-content속성 이 모두 있습니다. 하나는 많은 플렉스 라인 주위에 공간을 분배하는 방법을 결정하는 align-content반면 다른 하나 는 플렉스 라인 내에서 횡축의 개별 플렉스 항목 align-self주위에 공간을 분배하는 방법을 결정합니다 .

( *-items단순히 기본값을 설정하기 때문에 속성을 무시하고 있습니다 *-self.)

나는 이것이 flexbox를 사용하지 않는다는 것을 알고 있지만, 세 가지 항목 (왼쪽, 하나는 중앙, 하나는 오른쪽)의 간단한 유스 케이스의 경우 display: grid부모, grid-area: 1/1/1/1;자식 및 justify-self위치 지정을 사용하여 쉽게 수행 할 수 있습니다 그 아이들의.

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

방금이 문제에 대한 내 자신의 해결책 또는 적어도 내 문제를 찾았습니다. 대신을
사용하고있었습니다 .justify-content: space-aroundjustify-content: space-between;

이렇게하면 끝 요소가 위쪽과 아래쪽에 달라 붙어 원하는 경우 사용자 정의 여백을 가질 수 있습니다.