플렉스 랩은 align-self, align-items 및 align-content와 어떻게 작동합니까?
align-self
다음 코드에서 align-self
작동합니다 flex-wrap: nowrap
.
flex-container {
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:last-child {
align-self: flex-end;
background-color: crimson;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
그러나 컨테이너가로 전환 flex-wrap: wrap
되면 align-self
속성이 실패합니다.
flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:last-child {
align-self: flex-end;
background-color: crimson;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
align-items
마찬가지로 align-items
여기에서 작동하는 이유 (랩핑 비활성화 됨) :
flex-container {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
...하지만 여기에는 없습니다 (랩 사용 가능) :
flex-container {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
align-content
를 사용 flex-wrap: nowrap
하면 align-content
속성이 여기에서 플렉스 항목을 세로로 가운데에 배치하지 않습니다.
flex-container {
display: flex;
flex-wrap: nowrap;
align-content: center;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
그러나 이상하게도 wrap이 활성화되고 align-content
생략되면 컨테이너는 여기에서 행 사이에 넓은 간격을 만듭니다.
flex-container {
display: flex;
flex-wrap: wrap;
/* align-content: center; */
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
그리고 align-self
다시 작동합니다.
flex-container {
display: flex;
flex-wrap: wrap;
/* align-content: center; */
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:nth-child(even) {
align-self: flex-end;
background-color: crimson;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
, 및에서 어떻게
flex-wrap
작동 합니까?align-self
align-items
align-content?
짧은 대답
있지만 flex-wrap
속성은 아주 기본적인 것 - 그것은 플렉스 항목을 포장 할 수 있는지 여부를 제어 - 실제로 전체 인 flexbox 레이아웃에 광범위한 영향을 미친다.
이 flex-wrap
속성은 사용할 플렉스 컨테이너 유형을 결정합니다.
flex-wrap: nowrap
한 줄 플렉스 컨테이너를 만듭니다.flex-wrap: wrap
및wrap-reverse
만들 멀티 라인 플렉스 컨테이너를
align-items
및 align-self
속성은 모두 단일 및 다중 회선 용기에 작동합니다. 그러나 플렉스 라인의 교차 축에 여유 공간이있을 때만 효과가있을 수 있습니다.
이 align-content
속성은 여러 줄 컨테이너에서만 작동합니다. 한 줄 컨테이너에서는 무시됩니다.
설명
인 flexbox 사양 플렉스 항목을 정렬하기위한 네 가지 키워드 속성을 제공합니다 :
align-items
align-self
align-content
justify-content
이러한 속성의 기능을 이해하려면 먼저 플렉스 컨테이너의 구조를 이해하는 것이 중요합니다.
1 부 : 플렉스 컨테이너의 주축 및 교차 축 이해
X 및 Y 축
플렉스 컨테이너는 x 축 (수평)과 y 축 (수직)의 두 방향으로 작동합니다.
출처 : Wikipedia
"플렉스 아이템"으로 알려진 플렉스 컨테이너의 자식 요소는 어느 방향 으로든 정렬 될 수 있습니다.
이것은 가장 기본적인 수준에서의 플렉스 정렬입니다.
메인 및 크로스 축
x 및 y 축을 오버레이하는 것은 플렉스 레이아웃에서 기본 및 교차 축입니다.
기본적으로 기본 축은 가로 (x 축)이고 교차 축은 세로 (y 축)입니다. 이것이 flexbox 사양에 정의 된 초기 설정 입니다.
출처 : W3C
그러나 고정 된 x 및 y 축과 달리 주축과 교차 축은 방향을 전환 할 수 있습니다.
flex-direction
속성
위 이미지에서 주축은 수평이고 교차 축은 수직입니다. 앞서 언급했듯이 플렉스 컨테이너의 초기 설정입니다.
그러나 이러한 방향은 flex-direction
속성을 통해 쉽게 전환 할 수 있습니다 . 이 속성은 주축의 방향을 제어합니다. 플렉스 항목이 수직 또는 수평으로 정렬되는지 여부를 결정합니다.
사양에서 :
5.1. Flex Flow Direction :
flex-direction
속성이
flex-direction
속성은 플렉스 컨테이너의 주 축 방향을 설정하여 플렉스 컨테이너에 플렉스 항목이 배치되는 방식을 지정합니다. 이것은 플렉스 아이템이 배치되는 방향을 결정합니다.
flex-direction
속성 에는 다음과 같은 네 가지 값이 있습니다.
/* main axis is horizontal, cross axis is vertical */
flex-direction: row; /* default */
flex-direction: row-reverse;
/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;
교차 축은 항상 주 축에 수직입니다.
파트 2 : 플렉스 라인
컨테이너 내에서 플렉스 아이템은 "플렉스 라인"으로 알려진 라인에 존재합니다.
플렉스 라인은에 따라 행 또는 열입니다 flex-direction
.
컨테이너에는에 따라 하나 이상의 줄이있을 수 있습니다 flex-wrap
.
단일 라인 플렉스 컨테이너
flex-wrap: nowrap
플렉스 항목이 컨테이너를 넘친 경우에도 한 줄에 머물도록 강제하는 한 줄 플렉스 컨테이너를 설정합니다.
위의 이미지에는 하나의 플렉스 라인이 있습니다.
flex-container {
display: flex;
flex-direction: column;
flex-wrap: nowrap; /* <-- allows single-line flex container */
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
width: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
멀티 라인 플렉스 컨테이너
flex-wrap: wrap
또는 wrap-reverse
플렉스 아이템이 새로운 라인을 생성 할 수있는 멀티 라인 플렉스 컨테이너를 설정합니다.
위 이미지에는 세 개의 플렉스 라인이 있습니다.
flex-container {
display: flex;
flex-direction: column;
flex-wrap: wrap; /* <-- allows multi-line flex container */
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
width: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
위 이미지에는 세 개의 플렉스 라인이 있습니다.
flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* <-- allows multi-line flex container */
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
3 부 : 키워드 정렬 속성
속성이 주축 및 교차 (X 및 Y 아님) 축에 할당됩니다.
그동안 flex-direction
재산권 플렉스 항목이 배치되는 방향을 제어하는 제어 정렬 및 포지셔닝하는 사 개 특성이있다. 이것들은:
align-items
align-self
align-content
justify-content
이러한 각 속성은 축에 영구적으로 할당됩니다.
이 justify-content
속성은 주축에서만 작동합니다.
세 가지 align-*
속성은 교차 축에서만 작동합니다.
이러한 속성이 x 및 y 축에 고정되어 있다고 가정하는 것은 일반적인 실수입니다. 예를 들어 justify-content
는 항상 수평이고 align-items
항상 수직입니다.
그러나 flex-direction
로 전환하면 column
주축이 y 축이되어 justify-content
수직으로 작동합니다.
이 게시물의 초점은 교차 축 정렬입니다. 주축 정렬 및 justify-content
속성에 대한 설명 은 다음 게시물을 참조하십시오.
정의
flexbox 사양은 교차 축 정렬을위한 세 가지 키워드 속성을 제공합니다.
align-items
align-self
align-content
align-items
/ align-self
이 align-items
속성은 플렉스 라인의 교차 축을 따라 플렉스 항목을 정렬합니다. 플렉스 컨테이너에 적용됩니다.
이 align-self
속성은 align-items
개별 플렉스 항목 을 재정의 하는 데 사용됩니다 . 플렉스 아이템에 적용됩니다.
사양의 정의는 다음과 같습니다.
8.3. 교차 축 정렬 :
align-items
및align-self
속성플렉스 아이템은 플렉스 컨테이너의 현재 라인의 교차 축에서 유사
justify-content
하지만 수직 방향으로 정렬 될 수 있습니다 .align-items
플렉스 컨테이너의 모든 항목에 대한 기본 정렬을 설정합니다.align-self
개별 플렉스 항목에 대해이 기본 정렬을 재정의 할 수 있습니다.
align-items
/에 대해 가능한 6 개의 값이 있습니다 align-self
.
flex-start
flex-end
center
baseline
stretch
auto
(align-self
만)
(각 값에 대한 설명을 보려면 위의 사양 정의 제목을 클릭하십시오.)
의 초기 값은 align-items
입니다 stretch
. 즉, 플렉스 항목이 컨테이너의 교차 축에서 사용 가능한 전체 길이를 확장합니다.
의 초기 값은 align-self
입니다 auto
. 이는의 값을 상속 함을 의미합니다 align-items
.
아래는 행 방향 컨테이너에서 각 값의 효과를 보여줍니다.
출처 : W3C
align-content
이 속성은 align-items
및 보다 약간 더 복잡 align-self
합니다.
사양의 정의는 다음과 같습니다.
8.4. 플렉스 라인 포장 :
align-content
속성이
align-content
속성은 주축justify-content
내에서 개별 항목을 정렬 하는 방법 과 유사하게 교차 축에 추가 공간이있을 때 플렉스 컨테이너 내에서 플렉스 컨테이너의 선을 정렬합니다. 이 속성은 한 줄 플렉스 컨테이너에는 영향을주지 않습니다.
대조적 align-items
및 align-self
플렉스 항목을 이동, 그 라인에서 , align-content
플렉스 라인 이동 용기 내를 .
다음과 같은 6 가지 가능한 값이 있습니다 align-content
.
flex-start
flex-end
center
space-between
space-around
stretch
(각 값에 대한 설명을 보려면 위의 사양 정의 제목을 클릭하십시오.)
아래는 행 방향 컨테이너에서 각 값의 효과를 보여줍니다.
출처 : W3C
align-content
다중 라인 플렉스 컨테이너에서만 작동하는 이유는 무엇 입니까?
단일 라인 플렉스 컨테이너에서 선의 교차 크기는 컨테이너의 교차 크기와 같습니다. 이는 라인과 컨테이너 사이에 여유 공간이 없음을 의미합니다. 결과적으로 align-content
효과가 없습니다.
단일 라인 플렉스 컨테이너에서는 단독 라인이 공간을 채우기 위해 자동으로 늘어나 기 때문에 다중 라인 플렉스 컨테이너 만 선을 정렬 할 수있는 교차 축에 여유 공간이 있습니다.
파트 4 : 설명 된 예
예제 # 1에서는 플렉스 항목이 한 줄 컨테이너에 있기 때문에 align-self
함께 작동합니다 flex-wrap: nowrap
. 따라서 하나의 플렉스 라인이 있으며 컨테이너의 높이와 일치합니다.
flex-container {
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:last-child {
align-self: flex-end;
background-color: crimson;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
예제 # 2에서는 align-self
여러 줄 컨테이너 ( flex-wrap: wrap
)에 존재 하고 align-content
로 설정되어 있기 때문에 실패 합니다 flex-start
. 즉, 플렉스 라인이 교차 축의 시작 부분까지 꽉 채워져 align-self
작업을 위한 여유 공간이 없습니다 .
flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:last-child {
align-self: flex-end;
background-color: crimson;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
예제 # 3에 대한 설명은 예제 # 1과 동일합니다.
flex-container {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
예제 # 4에 대한 설명은 예제 # 2에 대한 설명과 동일합니다.
flex-container {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
예제 # 5는 한 줄 컨테이너입니다. 따라서 플렉스 라인의 십자 크기는 컨테이너의 십자 크기와 같으며 둘 사이에 추가 공간을 남기지 않습니다. 따라서 교차 축에 추가 공간이있을 때align-content
플렉스 라인을 정렬하는 은 효과가 없습니다.
flex-container {
display: flex;
flex-wrap: nowrap;
align-content: center;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
의 초기 설정은 align-content
입니다 stretch
. 즉, 다른 값을 지정하지 않으면 컨테이너가 사용 가능한 공간을 플렉스 라인간에 균등하게 분배합니다. (모든 플렉스 아이템이을 얻을 때 주축에 유사한 효과가 생성됩니다 flex: 1
.)
이러한 행 간 공간 분포는 행 / 열 사이에 넓은 간격을 유발할 수 있습니다. 줄이 적 으면 간격이 더 넓어집니다. 선이 많을수록 간격이 작아 지므로 각 선이 공간을 더 적게 차지합니다.
이 문제를 해결하려면에서 align-content: stretch
로 전환하십시오 align-content: flex-start
. 이렇게하면 줄이 함께 포장됩니다 (위의 예 # 2 및 # 4 참조). 물론 이것은 또한 라인의 여유 공간을 제거 align-items
하고 align-self
더 이상 작동하지 않습니다.
관련 게시물은 다음과 같습니다. 여러 줄의 플렉스 항목을 래핑 할 때 간격 (틈)을 제거합니다 .
flex-container {
display: flex;
flex-wrap: wrap;
/* align-content: center; */
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
이전 예제에서 설명한 align-content: stretch
것처럼를 사용하면 플렉스 라인에 추가 공간이있을 수 있으므로 작업 을 허용 align-items
하고 사용할 align-self
수 있습니다. 에 대한 다른 값 align-content
은 줄을 채우고 여분의 공간을 제거하고 만들 align-items
거나 align-self
쓸모 없게 만듭니다.
flex-container {
display: flex;
flex-wrap: wrap;
/* align-content: center; */
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:nth-child(even) {
align-self: flex-end;
background-color: crimson;
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
우선, 줄 바꿈이 없으면 align-content는 쓸모가 없습니다.
align-content 속성은 가로축에 여분의 공간이있을 때 플렉스 컨테이너 내에서 플렉스 컨테이너의 선을 정렬합니다. 이 속성은 한 줄 플렉스 컨테이너 에는 영향 을 주지 않습니다 .
또한 두 번째 경우에는 align-self가 실패하지 않습니다. 내부 라인이 꽉 찼기 때문에 쓸모가 없습니다. 스타일이 작동 할 수 있도록 공간을 만들어 보겠습니다.
flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:last-child {
align-self: flex-end;
background-color: crimson;
}
flex-item:nth-child(5) {
height: 90px; /* added */
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
마찬가지로 네 번째 예에서 스타일이 표시 될 수있는 조건을 설정하면 스타일이 작동합니다.
flex-container {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:nth-child(2),flex-item:nth-child(5) {
height: 90px; /* added */
}
<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
마지막으로 align-content에 주석을 달면 stretch 로 되돌아 가기 때문에 컨테이너를 채우기 위해 줄 크기가 증가합니다.
스트레치 라인은 나머지 공간을 차지하도록 늘어납니다. 남은 여유 공간이 음수이면이 값은 flex-start와 동일합니다. 그렇지 않으면 여유 공간이 모든 선간에 균등하게 분할되어 교차 크기가 증가합니다.
'programing' 카테고리의 다른 글
순수한 Java 구성을 사용하는 Spring 3.2 @value 주석은 작동하지 않지만 Environment.getProperty는 작동합니다. (0) | 2021.01.14 |
---|---|
Visual Studio 2013을 사용하여 관리 코드를 디버깅 할 수 없음 ( "식을 평가할 수 없음"오류-디버그 빌드 사용 중) (VS 2012가 작동 함) (0) | 2021.01.14 |
기본 데이터 소스를 업데이트 할 때 DataGridView를 새로 고치는 가장 좋은 방법 (0) | 2021.01.14 |
이메일을 받고 웹 애플리케이션에서 처리하는 방법 (0) | 2021.01.14 |
새로운 Number () 대 Number () (0) | 2021.01.14 |