CSS Flexbox에서 "justify-items" 및 "justify-self" 속성이 없는 이유는 무엇입니까?
플렉스 용기의 주축 및 크로스 축을 고려합니다.
출처: W3C
주축을 따라 유연한 항목을 정렬하려면 다음과 같은 특성이 있습니다.
가로축을 따라 플렉스 항목을 정렬하려면 다음과 같은 세 가지 특성이 있습니다.
위 이미지에서 주축은 수평이고 가로축은 수직입니다.다음은 Flex 컨테이너의 기본 방향입니다.
그러나 이러한 방향은 속성과 쉽게 교환할 수 있습니다.
/* 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;
(횡축은 항상 주축에 수직입니다.)
축의 작동 방식을 설명하는 제 요점은 두 방향에 대해 특별한 것이 없는 것 같다는 것입니다.둘 다 주축, 축다, 둘중과, 가성요중면동다니일합에서요성로▁main,다,▁in▁equal동니일합▁terms면.flex-direction앞뒤로 쉽게 전환할 수 있습니다.
그렇다면 왜 가로축은 두 개의 추가 정렬 속성을 얻게 되는 것입니까?
왜 그럴까요?align-content그리고.align-items주요 축에 대한 하나의 속성으로 통합됩니까?
주축이 다음 값을 얻지 못하는 이유는 무엇입니까?justify-self재산?
이러한 속성이 유용한 시나리오:
#box3 { align-self: flex-end; justify-self: flex-end; }항목 하기(연한항유그오로정으렬쪽른을룹목▁(정유(▁making렬▁aright▁align로▁of)
justify-content: flex-end항목은 합니다(하지만첫번왼정항다니렬합로으쪽을목째▁left()justify-self: flex-start)
.nav 파일 형식의 파일 형식입니다.와 함께justify-self로고는 왼쪽으로 정렬할 수 있고 탐색 항목은 오른쪽으로 유지되며 전체가 다른 화면 크기로 부드럽게 조정("플렉시블")됩니다.
- 항목을 한 (3개의 플렉스 항목).
justify-content: center을 사용하여 가장자리에 ( ).justify-self: flex-start그리고.justify-self: flex-end).
값에 유의하십시오.space-around그리고.space-betweenjustify-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>이 글을 쓰는 시점에서, 다음에 대한 언급은 없습니다.justify-self또는justify-items플렉스박스 사양에 있습니다.
그러나 모든 상자 모델에서 사용할 공통 정렬 속성 집합을 설정하는 W3C의 미완성 제안인 CSS 상자 정렬 모듈에는 다음이 있습니다.
출처: W3C
은 그것을 될 입니다.justify-self그리고.justify-items현재 검토 중인 것은...하지만 플렉스박스는 아닙니다.
마지막으로 주요 질문을 다시 한 번 말씀드리겠습니다.
"justify-items" 및 "justify-self" 속성이 없는 이유는 무엇입니까?
주축을 따라 Flex 항목 정렬 방법
질문에 명시된 바와 같이:
주축을 따라 유연한 항목을 정렬하려면 다음과 같은 특성이 있습니다.
가로축을 따라 플렉스 항목을 정렬하려면 , 및 세 가지 속성이 있습니다.
그런 다음 질문은 다음과 같습니다.
왜없요가 ?
justify-items그리고.justify-self부동산?
한가지 대답은: 그것들이 필요하지 않기 때문입니다.
Flexbox 사양은 주축을 따라 Flex 항목을 정렬하는 두 가지 방법을 제공합니다.
- 그
justify-content속성 및 속성 auto
내용을 정당화하다
속성은 플렉스 용기의 주축을 따라 플렉스 항목을 정렬합니다.
플렉스 컨테이너에 적용되지만 플렉스 항목에만 영향을 미칩니다.
5가지 정렬 옵션이 있습니다.
flex-start플렉스 항목은 줄의 시작 부분을 향해 패킹됩니다.
flex-end플렉스 항목은 줄의 끝을 향해 패킹됩니다.
center플렉스 항목은 라인의 중심을 향해 패킹됩니다.
space-between플렉스 항목은 첫 번째 항목이 용기의 한쪽 가장자리에 정렬되고 마지막 항목이 반대쪽 가장자리에 정렬되어 균등한 간격으로 배치됩니다.첫 번째와 마지막 항목에서 사용되는 가장자리는 및 쓰기 모드에 따라 달라집니다.ltr또는rtl).
space-around와 동일space-between양쪽 끝에 절반 크기의 공백이 있는 경우를 제외하고는.
자동 여백
여백을 사용하여 유연한 항목을 중앙에 배치하거나 간격을 두거나 하위 그룹으로 채울 수 있습니다.
와는과 다르게 .justify-content 용기에 되는 플렉스 용기,auto마진은 플렉스 항목에 적용됩니다.
지정된 방향으로 모든 사용 가능한 공간을 사용하여 작동합니다.
유연한 항목 그룹을 오른쪽에 정렬하지만 첫 번째 항목은 왼쪽에 정렬
질문의 시나리오:
항목 하기(연한항유그오로정으렬쪽른을룹목▁(정유(▁making렬▁aright▁align로▁of)
justify-content: flex-end항목은 합니다(하지만첫번왼정항다니렬합로으쪽을목째▁left()justify-self: flex-start).nav 파일 형식의 파일 형식입니다.와 함께
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).값에 유의하십시오.
space-around그리고.space-betweenjustify-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 사양을 사용하면 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>작동 방식은 다음과 같습니다.
- 디비
.container컨테이너입니다는 플렉스 컨테이너입니다. - 각 하위 디브(
.box한 항목입니다는 이제 유연한 항목입니다. - 각
.box아이템이 주어집니다.flex: 1컨테이너 공간을 균등하게 분배하기 위해. - 이제 항목이 행의 모든 공간을 사용하고 너비가 같습니다.
- 각 항목을 (내포된) 유연한 용기로 만들고 추가
justify-content: center. - 각각의 제이각자.
span요소는 중심 플렉스 항목입니다. - 플렉스 사용
auto을span좌우로
당신은 또한 포기할 수도 있습니다.justify-content 및사를 합니다.auto전유의 마진
그렇지만justify-content여기서 일할 수 있는 이유는auto여백에는 항상 우선 순위가 있습니다.사양에서:
전다통해을을 통해
justify-content그리고.align-self임의의 양의 여유 공간이 해당 차원의 자동 여백에 분배됩니다.
prasy-content: 공간-동일(개념)
잠시 뒤로 돌아가서, 여기 한 가지 더 선택할 수 있는 방법이 있습니다.
space-same의 하이브리드space-between그리고.space-around플렉스 항목은 일정한 간격으로 배치됩니다(예:space-between), 양 끝의 절반 크기의 공백 대신 제외(예:space-around), 양의 공간이 .), 의 경우, 의 경우, 의 경우, 의 경우입니다.
이 레이아웃은 Flex 컨테이너의 및 유사 요소를 사용하여 수행할 수 있습니다.
(credit: 코드는 @oriol, 라벨은 @crl)
업데이트: 브라우저는 위와 같은 기능을 구현하기 시작했습니다.자세한 내용은 이 게시물을 참조하십시오. 플렉스 항목 사이의 동일한 공간
플레이그라우트(위의 모든 예에 대한 코드 포함)
이것이 답이 아니라는 것을 알지만, 저는 이 문제에 기여하고 싶습니다.그들이 석방할 수 있다면 정말 좋을 것입니다.justify-selfflexbox를 위한 유연성 있는 유연성.
축에 여러 항목이 있을 때 가장 논리적인 방법은justify-self행동하는 것은 아래에 설명된 것처럼 가장 가까운 이웃(또는 가장자리)에 자신을 맞추는 것입니다.
저는 진심으로 W3C가 이것에 주목하고 최소한 고려하기를 바랍니다.=)
이렇게 하면 왼쪽 상자와 오른쪽 상자의 크기에 관계없이 진정으로 중앙에 배치되는 항목을 얻을 수 있습니다.상자 중 하나가 중앙 상자의 지점에 도달하면 더 이상 분배할 공간이 없을 때까지 상자를 누르기만 하면 됩니다.
멋진 레이아웃을 쉽게 만들 수 있는 방법은 무궁무진합니다. 이 "복잡한" 예를 살펴보십시오.
이것은 www 스타일 목록에 대한 질문이었고, Tab Atkins(규격 편집자)는 그 이유를 설명하는 답변을 제공했습니다.여기서 그것에 대해 조금 더 자세히 설명하겠습니다.
라인이라고 flex-wrap: nowrap). 이에는 분명히 --의 항목이 한의 항목만 쌓여 있습니다 이 경우, 주축과 가로축 사이에는 분명히 정렬 차이가 있습니다. 주축에는 여러 개의 항목이 쌓여 있지만 가로축에는 하나의 항목만 쌓여 있습니다.따라서 항목별 맞춤형 "align-self"를 십자축에 사용하는 것은 의미가 있지만(각 항목이 개별적으로 정렬되므로), 주축에는 의미가 없습니다(항목이 집합적으로 정렬되므로).
다중 라인 플렉스 박스의 경우 각 "플렉스 라인"에 동일한 로직이 적용됩니다.주어진 선에서 항목은 (선당 가로축에 하나의 항목만 있기 때문에) 주축과 집합적으로 교차축에 개별적으로 정렬됩니다.
여기 그것을 표현하는 또 다른 방법이 있습니다: 그래서, 모든.*-self그리고.*-content속성은 사물 주위에 여분의 공간을 분배하는 방법에 관한 것입니다.하지만 중요한 차이점은*-self버전은 해당 축에 단 하나의 것만 있는 경우를 위한 것이며,*-content버전은 해당 축에 잠재적으로 많은 것이 있을 때 사용합니다.단일 요소 대 다수 요소 시나리오는 다양한 유형의 문제이므로 사용할 수 있는 다양한 유형의 옵션이 있습니다. 예를 들어,space-around/space-between은 가관은다같다니습과음치에 대해 의미가 .*-content하지만 때문은 아닙니다.*-self.
플렉스박스의 주축에는 공간을 분배할 수 있는 많은 것들이 있습니다.비상대기상태*-content재산은 거기서 말이 되지만, 그것은 아닙니다.*-self소유물.
반대로, 가로축에서, 우리는 둘 다를 가지고 있습니다.*-self a 리고a.*-content소유물.하나는 다양한 플렉스 라인을 중심으로 공간을 어떻게 배분할 것인지를 결정합니다.align-content (), 반에면다른▁(다른▁), ()align-self)는 주어진 플렉스 라인 내에서 크로스 축의 개별 플렉스 항목 주위에 공간을 분배하는 방법을 결정합니다.
하고 있습니다.*-items속성은 단순히 기본값을 설정하기 때문에 여기에 있습니다.*-self.)
이는 플렉스박스의 1차원 특성상 주축을 따라 여러 항목이 있을 수 있어 단일 항목을 정당화할 수 없기 때문입니다.주 하려면 Flexbox를 합니다.justify-content소유물.
사용하지 것은 , 세 항목, 의 사용 사례에 는 플렉스박스를 사용하여 할 수 .display: grid에게부모,게▁on모에,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-around에 justify-content: space-between;.
이렇게 하면 엔드 요소가 상단과 하단에 부착되며, 원하는 경우 사용자 정의 마진을 가질 수 있습니다.
언급URL : https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties
'programing' 카테고리의 다른 글
| matplotlib에서 플롯, 축 또는 그림을 사용하여 플롯을 그리는 것의 차이점은 무엇입니까? (0) | 2023.06.15 |
|---|---|
| 파이썬에서 문자열 크기를 구하는 방법은 무엇입니까? (0) | 2023.06.15 |
| iOS에 대한 이벤트 처리 - 테스트:withEvent:와 pointInside:withEvent:는 관련이 있습니까? (0) | 2023.06.15 |
| Excel 2010에서 VBA 코드를 사용하여 웹 서비스 호출 (0) | 2023.06.15 |
| Excel에서 셀 이름 검색 중 (0) | 2023.06.10 |