[css] CSS 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 (위의 모든 예제에 대한 코드 포함)

답변

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