css - 속성 - justify>- self not working




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

플렉스 컨테이너의 기본 축과 가로 축을 고려하십시오.

출처 : W3C

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

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

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

그러나 이러한 방향은 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-contentalign-items 이 주축의 하나의 속성으로 통합되는 이유는 무엇입니까?

주축이 justify-self 속성을 얻지 못하는 이유는 무엇입니까?

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

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

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

    탐색 항목 그룹과 로고가있는 헤더 섹션을 고려하십시오. justify-self 를 사용하면 탐색 항목이 가장 오른쪽에있는 동안 로고를 왼쪽으로 정렬 할 수 있으며 모든 것이 다른 화면 크기에 맞게 부드럽게 조정됩니다 ( "flexes").

  • 3 개의 플렉스 아이템의 행에서, 중간 아이템을 컨테이너의 중심에 맞추고 ( justify-content: center ) 인접한 아이템을 컨테이너 가장자리에 맞 춥니 다 ( justify-self: flex-startjustify-self: flex-end ).

    justify-content 속성의 space-aroundspace-between justify-content 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 middle box will only be truly centered if adjacent boxes are equal width</p>

jsFiddle 버전

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

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

출처 : W3C

당신은 justify-selfjustify-items 이 고려되고 있음 을 알 수 있지만 flexbox에는 적합하지 않습니다 .

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

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


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

질문에 명시된 바와 같이 :

주축을 따라 플렉스 아이템을 정렬하려면 한 가지 속성이 있습니다 : justify-content

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

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

justify-itemsjustify-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 를 사용하면 탐색 항목이 가장 오른쪽에있는 동안 로고를 왼쪽으로 정렬 할 수 있으며 모든 것이 다른 화면 크기에 맞게 부드럽게 조정됩니다 ( "flexes").

다른 유용한 시나리오 :

구석에 플렉스 아이템 배치

질문의 시나리오 :

  • 코너에 플렉스 아이템 배치하기 .box { align-self: flex-end; justify-self: flex-end; } .box { align-self: flex-end; justify-self: flex-end; }

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

margin: autojustify-content: centerjustify-content: center 하는 대안입니다 justify-content: centeralign-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-startjustify-self: flex-end ).

    justify-content 속성의 space-aroundspace-between justify-content space-between 값은 인접한 항목의 너비가 다른 경우 중간 항목을 컨테이너와 관련하여 가운데에 유지하지 않습니다 ( 데모 참조 ).

언급 한 바와 같이, 모든 플렉스 아이템의 너비 또는 높이가 동일하지 않으면 ( 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: centerjustify-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-contentjustify-content 하고 auto 마진을 독점적으로 사용할 수도 있습니다.

그러나 auto 마진이 항상 우선하기 때문에 justify-content 는 여기에서 작동 할 수 있습니다. 사양에서 :

8.1. auto 여백 정렬

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

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

1 분 동안 justify-contentjustify-content 돌아가서, 여기에 또 하나의 옵션에 대한 아이디어가 있습니다.

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

이 레이아웃은 플렉스 컨테이너의 ::before ::after 유사 요소로 수행 할 수 있습니다.

(신용 : 코드의 경우 @crl , 레이블의 경우 @crl )

업데이트 : 브라우저가 space-evenly 구현하기 시작하여 위의 작업을 수행합니다. 자세한 내용은이 게시물을 참조하십시오.

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


나는 이것이 flexbox를 사용하지 않는다는 것을 알고 있지만 세 가지 항목 (왼쪽, 하나는 중앙, 하나는 오른쪽)의 간단한 유스 케이스의 경우 display: grid parent의 grid-area: 1/1/1/1; , grid-area: 1/1/1/1; 사용하여 쉽게 수행 할 수 있습니다 grid-area: 1/1/1/1; 아이들에게, 그리고 그 아이들의 포지셔닝을 위해 justify-selfjustify-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>


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

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

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

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

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

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

(여기서 *-items 기본값을 설정하기 때문에 여기서는 *-items 속성을 무시합니다.)


justify-self 가 있지만 Chrome 안정 버전이 아닌 Chrome Canary에 있습니다. justify-items .

그러나 내가 알 수있는 한 그 속성도 작동하지 않습니다. 따라서 Google은 향후 CSS 릴리스를 위해 사전에 저장했을 것입니다. 그들이 속성을 곧 추가 할 수 있기를 바랍니다.





w3c