programing

플렉스 랩은 align-self, align-items 및 align-content와 어떻게 작동합니까?

nicescript 2021. 1. 14. 08:07
반응형

플렉스 랩은 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-selfalign-itemsalign-content?


짧은 대답

있지만 flex-wrap속성은 아주 기본적인 것 - 그것은 플렉스 항목을 포장 할 수 있는지 여부를 제어 - 실제로 전체 인 flexbox 레이아웃에 광범위한 영향을 미친다.

flex-wrap속성은 사용할 플렉스 컨테이너 유형을 결정합니다.

  • flex-wrap: nowrap한 줄 플렉스 컨테이너를 만듭니다.
  • flex-wrap: wrapwrap-reverse만들 멀티 라인 플렉스 컨테이너를

align-itemsalign-self속성은 모두 단일 및 다중 회선 용기에 작동합니다. 그러나 플렉스 라인의 교차 축에 여유 공간이있을 때만 효과가있을 수 있습니다.

align-content속성은 여러 줄 컨테이너에서만 작동합니다. 한 줄 컨테이너에서는 무시됩니다.


설명

인 flexbox 사양 플렉스 항목을 정렬하기위한 네 가지 키워드 속성을 제공합니다 :

  • align-items
  • align-self
  • align-content
  • justify-content

이러한 속성의 기능을 이해하려면 먼저 플렉스 컨테이너의 구조를 이해하는 것이 중요합니다.


1 부 : 플렉스 컨테이너의 주축 및 교차 축 이해

X 및 Y 축

플렉스 컨테이너는 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플렉스 아이템이 새로운 라인을 생성 할 수있는 멀티 라인 플렉스 컨테이너를 설정합니다.

여러 줄 플렉스 컨테이너 (3 열)

위 이미지에는 세 개의 플렉스 라인이 있습니다.

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>

여러 줄 플렉스 컨테이너 (3 행)

위 이미지에는 세 개의 플렉스 라인이 있습니다.

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

아래는 행 방향 컨테이너에서 각 값의 효과를 보여줍니다.

align-items align-self 값

                                                                                                                출처 : W3C

align-content

이 속성은 align-items보다 약간 더 복잡 align-self합니다.

사양의 정의는 다음과 같습니다.

8.4. 플렉스 라인 포장 : align-content속성

align-content속성은 주축 justify-content내에서 개별 항목을 정렬 하는 방법 유사하게 교차 축에 추가 공간이있을 때 플렉스 컨테이너 내에서 플렉스 컨테이너의 선을 정렬합니다. 이 속성은 한 줄 플렉스 컨테이너에는 영향을주지 않습니다.

대조적 align-itemsalign-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는 쓸모가 없습니다.

w3c 문서

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와 동일합니다. 그렇지 않으면 여유 공간이 모든 선간에 균등하게 분할되어 교차 크기가 증가합니다.

참조 URL : https://stackoverflow.com/questions/42613359/how-does-flex-wrap-work-with-align-self-align-items-and-align-content

반응형