CSS Flexbox에서 "justify-items"및 "justify-self" 속성이 없는 이유

프로그래밍 언어/HTML,CSS,JS

CSS Flexbox에서 "justify-items"및 "justify-self" 속성이 없는 이유

Rateye 2021. 9. 17. 11:02

728x90

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

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

_{출처 : W3C}

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

justify-content

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

위 이미지에서 주축은 수평이고 교차 축은 수직입니다. 이것은 플렉스 컨테이너의 기본 방향입니다.

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 ). justify-content space-around 및 space-between 값은 인접한 항목의 너비가 다른 경우 중간 항목을 컨테이너 중심에 유지하지 않습니다.

#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 버전

이 글을 쓰는 시점 에서 flexbox spec justify-self 또는 justify-items 에 대한 언급이 없습니다.

그러나 모든 상자 모델에서 사용할 공통 정렬 속성 집합을 설정하려는 W3C의 미완성 제안 인 CSS 상자 정렬 모듈에는 다음이 있습니다.

_{출처 : W3C}

justify-self 및 justify-items 가 고려되고 있음 을 알 수 있지만 flexbox에는 적용되지 않습니다 .

나는 주요 질문을 반복하면서 끝낼 것입니다.

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

답변

질문에 명시된 바와 같이 :

주축을 따라 플렉스 항목을 정렬하려면 justify-content

교차 축을 따라 플렉스 항목을 정렬하려면 align align-content , align-items 및 align-self 세 가지 속성이 있습니다.

그런 다음 질문은 다음과 같습니다.

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

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

flexbox 사양 은 기본 축을 따라 flex 항목을 정렬 하는 두 가지 방법을 제공합니다.

정당화 내용

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

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

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

flex-start ~ Flex 품목은 라인의 시작 부분에 포장됩니다.
flex-end ~ Flex 품목은 라인 끝쪽으로 포장됩니다.
center ~ Flex 품목은 라인의 중앙을 향해 포장됩니다.
space-between ~ Flex 항목은 균일 한 간격으로 배치되며 첫 번째 항목은 컨테이너의 한쪽 가장자리에 정렬되고 마지막 항목은 반대쪽 가장자리에 정렬됩니다. 첫 번째 항목과 마지막 항목에 사용되는 가장자리는 flex-direction 및 쓰기 모드 ( ltr 또는 rtl )에 따라 다릅니다.
space-around ~ 양쪽 끝에 절반 크기의 공백을 제외하고 space-between

Auto Margins

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

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

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

유연한 항목 그룹을 오른쪽에 정렬하고 첫 번째 항목을 왼쪽에 정렬

질문의 시나리오 :

플렉스 항목 그룹을 오른쪽으로 정렬 ( justify-content: flex-end )하지만 첫 번째 항목은 왼쪽에 정렬 ( justify-self: flex-start ) 탐색 항목 그룹과 로고가있는 헤더 섹션을 고려하십시오. justify-self 를 사용하면 탐색 항목이 맨 오른쪽에있는 동안 로고를 왼쪽으로 정렬 할 수 있으며 모든 것이 다른 화면 크기에 맞게 매끄럽게 조정됩니다 ( "플렉스").

기타 유용한 시나리오 :

코너에 유연한 항목 배치

질문의 시나리오 :

모서리에 플렉스 아이템 배치 .box { align-self: flex-end; justify-self: flex-end; }

유연한 항목을 수직 및 수평 중앙에 배치

margin: auto 는 justify-content: center 및 align-items: center .

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

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

플렉스 아이템에서 이것을 사용할 수 있습니다.

.box56 {
    margin: auto;
}

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

유연한 항목의 중심을 맞추고 첫 번째 항목과 가장자리 사이에 두 번째 유연한 항목의 중심을 맞춥니다.

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

따라서 균등 균형을 이루기 위해 중간 항목이 하나의 항목과 함께 컨테이너의 중앙에 배치 될 수 있도록 균형을 도입해야합니다.

아래 예에서 보이지 않는 세 번째 플렉스 아이템 (박스 61 및 68)은 "실제"아이템 (박스 63 및 66)의 균형을 맞추기 위해 도입되었습니다.

물론이 방법은 의미 론적 측면에서 좋지 않습니다.

또는 실제 DOM 요소 대신 의사 요소를 사용할 수 있습니다. 또는 절대 위치를 사용할 수 있습니다. 여기에서는 세 가지 방법을 모두 다룹니다. 가운데 및 아래쪽 정렬 플렉스 항목

참고 : 위의 예는 가장 바깥 쪽 항목이 높이 / 너비가 같은 경우에만 작동합니다. 플렉스 아이템의 길이가 다른 경우 다음 예를 참조하십시오.

인접 항목의 크기가 다양한 경우 유연한 항목 가운데 배치

질문의 시나리오 :

3 개의 플렉스 항목이있는 행에서 중간 항목을 컨테이너 중앙에 부착하고 ( justify-content: center ) 인접한 항목을 컨테이너 가장자리에 정렬합니다 ( justify-self: flex-start 및 justify-self: flex-end ).

justify-content space-around 및 space-between 값은 인접한 항목의 너비가 다른 경우 컨테이너를 기준으로 가운데 항목을 중앙에 유지하지 않습니다 ( demo 참조 ).

언급했듯이 모든 플렉스 항목이 너비 또는 높이가 같지 않으면 ( 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 사양 은 flex 항목의 절대 위치를 허용합니다. 이렇게하면 형제의 크기에 관계없이 중간 항목이 완벽하게 중앙에 위치 할 수 있습니다.

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

아래 예에서 중간 항목은 절대 위치를 중심으로하고 외부 항목은 유입 상태로 유지됩니다. 그러나 동일한 레이아웃을 역방향으로 얻을 수 있습니다. justify-content: center 가운데 항목을 가운데에 배치 : 바깥 쪽 항목을 중앙에 배치하고 절대 위치를 지정합니다.

솔루션 # 2 : 중첩 된 Flex 컨테이너 (절대 위치 없음)

.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 여백을 독점적으로 사용할 수도 있습니다.

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

8.1. auto 여백에 맞추기

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

justify-content : space-same (개념)

justify-content 돌아가서, 여기에 하나 더 옵션에 대한 아이디어가 있습니다.

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

이 레이아웃은 ::before 및 ::after 의사 요소를 사용하여 얻을 수 있습니다.

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

업데이트 : 브라우저는 위의 작업을 수행하는 space-evenly 구현하기 시작했습니다. 자세한 내용은이 게시물을 참조하십시오 : 플렉스 항목 사이의 동일한 공간

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

출처 : https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties

728x90

'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글

CSS에서 테이블 셀 패딩 및 셀 간격을 설정하는 방법 (0)	2021.09.17
CSS 글꼴 테두리 추가 하는 방법 (0)	2021.09.17
CSS 파일을 다른 CSS 파일에 포함 시키는 방법 (0)	2021.09.16
JavaScript에서 문자를 ASCII 코드로 변환 (0)	2021.09.16
JavaScript 비교 연산자 (== vs ===)의 차이 (0)	2021.09.16

현재글CSS Flexbox에서 "justify-items"및 "justify-self" 속성이 없는 이유

250x250

코딩하다 현타올 때마다 작성하러 오는 블로그

jQuery, String, HTML, Python, c++, Database, java, C#, JavaScript, CSS, Arrays, Linux, json, git, node.js, php, version-control, github, Android, js,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

코딩하다 현타올 때