flexbox - 2

Align Content

해당 프로퍼티는 다중라인 flex container 에서만 작동한다.
교차 축(cross-axis)의 정렬 방법을 설정한다.

.father {
	 height: 100vh;
    gap: 10px;
    flex-flow: row wrap;
    justify-content: center;    
    align-items: center;
}

기존에 배웠던 align-items는 항목 전체를 위, 아래 혹은 중앙으로 이동시킨다.
그리고 각 라인은 커다란 여백을 만든다.
이 부분을 정리할 수 있다.

.father {
	display: flex;
    height: 100vh;
    gap: 10px;
    flex-flow: row wrap;
    justify-content: center;    
    align-items: center;
    align-content: center; 
}

align-content는 항목들을 움직이지 않고 라인을 움직인다.
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있다.

한 줄일 경우 align-items 속성을 사용.

값	의미	기본값
stretch	Container의 교차 축을 채우기 위해 Items를 늘림	stretch
flex-start(start)	Items를 시작점으로 정렬
flex-end(end)	Items를 끝점으로 정렬
center	Items를 가운데 정렬
space-around	각 Item 주위에 여백을 고르게 정렬
space-between	첫 Item은 시작점에, 끝 Item은 끝점에 정렬하고 나머지 여백으로 고르게 정렬
space-evenly	모든 여백을 고르게 정렬

이렇게 다중 라인이 되면 row-gap, column-gap을 사용할 수 있다.

order

flex 컨테이너 안에 있는 자식 요소들의 순서를 변경할 수 있다.

.box:nth-child(3) {
  background-color: blueviolet;
}

.box:nth-child(6) {
  background-color: aqua;
}

.box:nth-child(3) {
  background-color: blueviolet;
  order: 2;
}

.box:nth-child(6) {
  background-color: aqua;
  order: 1;
}

order을 부여하지 않는 속성들이 앞에 있는 이유는 상대적으로 동작하는 속성이기 때문에다.
1,2,4,5,7,8의 box들은 order:0과 다름 없다.

반응형 디자인을 할때 좋다.

html 맨 아래에 있는 항목을 상단에 보여주고 싶을때
order에 음수 값을 넣어도 될까? 동작한다.

align-self

교차축 정렬을 하게 해준다.
한가지 자식에게만 적용되는 align-items(한줄) 속성이다.

.box:nth-child(1){
  align-self: flex-start;
}

.box:nth-child(1){
  align-self: flex-start;
}
.box:last-child{
  align-self: flex-end;
}

align-items가 center이기 때문에 컨테이너는 중앙에 배열되어 있지만 각 box에게 개별적으로 align-self 를 지정해둬서 대각선으로 정렬이 가능하다.

Flex-Grow

.box{
  height: 120px;
  color: white;
  font-size: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box:first-child{
  background-color: tomato;
}
.box:last-child{
  background-color: teal;
}

해당 box에는 너비가 없다.

• 직접 값을 설정하지 않고 flex container로 크기를 정할수 있다.
• 이유는 화면의 크기는 다양하기 때문이다. (노트북, 휴대폰, 태블릿 등등등)
• 비율에 대해서 생각해보자.

flex-grow는 컨테이너의 자식들에게 얼마만큼의 공간을 차지할 수 있는지 말해준다.
픽셀이나 배율을 사용하지 않고 비율을 이야기한다.

.box:first-child{
  background-color: tomato;
  flex-grow: 1;
}
.box:last-child{
  background-color: teal;
  flex-grow: 1;
}

둘다 동일한 flex 비율을 가지고 있어서 5:5로 보인다.

.box:first-child{
  background-color: tomato;
  flex-grow: 1;
}
.box:last-child{
  background-color: teal;
  flex-grow: 2;
}

이렇게 하면 1: 2의 비율로 조정이된다.
fles-grow의 기본값은 0 이며 이는 상자가 콘텐츠가 필요한 만큼의 공간을 차지한다는 의미이다.

Flex Shrink(축소)

shrink 역시 비율에 관한 의미이고 grow와 같이 형제들에게 상대적으로 변한다.
flex-shrink는 아이템이 얼마나 줄어들지 정할 수 있다.
어떤 비율로, 어느 순서로 먼저 줄어들지 정할 수 있다.

.box:first-child{
  background-color: tomato;
  flex-grow: 1;
  flex-shrink: 3;
}
.box:nth-child(2){
  background-color: orange;
  flex-grow: 2;
  flex-shrink: 0; /* 축소를 원하지 않아! */
}
.box:last-child{
  background-color: teal;
  flex-grow: 1;
  flex-shrink: 1; /* 기본값이다. */
}

빨간색이 먼저 압축되고 그다음 녹색 그다음 옐로우다

flex-shrink:3 이 먼저 줄어들어 든다. 이것은 비율이다.
만약 3개 박스 모두 동일하게 flex-shrink:1로 줄어들면 같은 비율로 줄어든다.

즉 flex-shrink는 Item이 감소하는 너비의 비율을 설정하고 숫자가 크면 더 많은 너비가 감소합니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과는 없다.

Flex-Basis

• Item의 (공간 배분 전) 기본 너비를 설정
  이 속성은 flex-grow 또는 flex-shrink에 의해 영향을 받지 않고, 초기 크기를 결정
  값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있다.

flex-grow:1, flex-shrink: 0으로 min-width와 같은 효과를 낼수 있다.
상자는 원하는 만큼 커질 수 있지만 축소를 시작하면 500에서 멈출것이다.

flex

flex-grow, flex-shrink, flex-basis 를 적는 대신에 flex를 쓰면 간단하게 가능하다.

.box:first-child {
	background-color: tomato;
    flex: 1 0 500px;
}