다시 시작하는 CSS😐
GitHub Desktop을 사용해 실습 내용 commit 해보면서 github 익히기💕
Flexbox
이전에 배운 float bye.🙋♀️
정렬의 끝판왕. 정렬에 특화된! flexbox로 다 해버릴테다.
가로배치를 하고자 하는 요소의 부모 요소에게 flexbox를 선언해준다. ('display: flex;' 속성을 적용)
▣ flexbox를 사용하기 위한 4가지 step
1) flexbox 사용 선언
box type을 정해주는 display 속성을 사용한다.
정렬하고자 하는 요소들을 감싸는 '부모 요소' 에게 선언한다.
.flexbox {
display: flex;
/* flex | inline-flex */
}flex도 일종의 box type으로 block과 유사하며 추가로 block은 갖지 못한, 요소들을 쉽게 정렬할 수 있는 기능이 있다.
inline-flex는 inline-block이 하지 못한 유용한 기능이 있다.
2) 정렬 방향 (가로 정렬 or 세로 정렬) 정하기
flex-direction의 속성값에 따라 '두 개의 축(Axis)의 방향'이 결정된다.
중요!✨ 축은 main axis(flex-direction 방향)와 cross axis(main axis의 수직 방향) 이다.
flex-direction(정렬 방향)에 따라 축의 방향이 달라지며, 두 개의 축은 중요한 기준점이 된다.
.flexbox {
display: flex;
flex-direction: row;
/* row | row-reverse | column | column-reverse */
}
-
flex-direction: row;(가로 정렬)인 경우, 가로 방향(왼->오)이 main
-
flex-direction: row-reverse;(가로 정렬)인 경우, 가로 방향(오->왼)이 main
-
flex-direction: column;(세로 정렬)인 경우, 세로 방향(위->아래)이 main
-
flex-direction: column-reverse;(세로 정렬)인 경우, 세로 방향(아래->위)이 main
3) 무조건 한 줄에 다 정렬 or 여러 줄에 정렬
.flexbox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/* nowrap | wrap */
}- 'flex-wrap: nowrap;' 은 자식 요소를 감싸지(wrap) 않고, 자식 요소의 사이즈를 (강제로)줄여서 무조건 '한 줄'에 정렬
- 'flex-wrap: wrap;' 은 모든 자식 요소를 한 줄에 정렬하기에 공간이 좁으면 자식 요소의 사이즈를 줄이지 않고 부모 요소보다 길면 '여러 줄'에 정렬
4) flexbox 제대로 사용하기!
-
justify-content : 선언한 flex-direction과 같은 방향인 main axis 기준으로 정렬할 때 사용하는 속성
(속성값: flex-start, flex-end, center, space-between, space-around) -
align-items / align-content : flex-direction과 수직 방향인 cross axis 기준으로 정렬할 때 사용하는 속성
(align-items 속성값: flex-start, flex-end, center)
😲align-content를 사용하기 위해서는 'flex-wrap: wrap;'이 되어야 하는데❗
'flex-wrap: wrap;'을 사용하게 되면 두 개의 flex line 이 생긴다.
align-content를 사용하면 여러 줄이 아니라 전체로 하나의 flex line에서 cross axis 기준으로 요소가 정렬된다.
하나의 flex line이기 때문에 align-content는 space-between, space-around도 사용 가능하다.
🤔 align-items와 align-content의 차이..?
(align-items은 하나의 flex line 기준으로 정렬되고, 하나의 요소만 존재하기 때문에 space-between, space-around은 사용 불가)
참고 그림🔮
🔽 'flex-wrap: wrap;'인 경우 두 개의 flex line이 생김
🔽 'align-content: center;'을 적용하면 전체의 cross-axis 기준으로 하나의 flex line이 생김
(🍯Tip!) " 先 'align-items' -> 後 'align-content' "
align-items만으로 정렬이 되지 않는다면 align-content 속성을 사용한다.
➕ 추가 개념! 'flex-grow' 속성
: flex 요소들의 크기를 늘였다 줄였다 조절하는데 사용하는 속성
속성값은 정수이며, 여러 flex 요소가 있는 경우 각각의 정수값 비율만큼 영역을 차지한다.
다른 경우, 따로 width 값을 설정하지 않았다면 가장 긴 요소의 길이만큼 box width가 설정되어 나머지 영역은 여백이 생긴다. 생긴 여백을 flex 요소로 차지하고 싶을 때 'flex-grow: 1;'을 설정한다.
order
몇번째 위치로 이동해야하는지 순서를 지정하는 속성
(box 요소가) markup 되어 있는 순서대로 CSS 스타일 적용하지만 flexbox를 사용하면 markup 순서를 바꿀 수 있다.
.papa {
order: 3;
}
.mama {
order: 1;
}
.ylyl {
order: 2;
}
// 화면에 보여지는 요소는 order 속성값이 1->2->3 순서대로 나열된다.📚 참고
☪ flexbox를 이용해 요소를 가운데 정렬하는 방법 중에 실무에서 선호하고 더 사용되는 코드는?
(①부모 요소에 flex속성과 justify-content, align-items에 center 또는 ②(부모 요소에 flex 속성을 주고) 자식 요소에 margin: 0 auto;)
🅰
①번 방법을 현업에서 많이 쓰이고 매우 선호하는 방법이다.🤞
부모에게 flex를 주고 속성을 추가하면 손쉽게 자식 요소를 원하는 위치에 정렬할 수 있기 때문이다. (원래 flex를 사용하는 목적)
②번 방법을 사용한 코드를 보면 'flex 사용하고 싶지 않았나, 간단한 코드라서 margin으로 처리했나'라고 생각될 것이다.
굳이 부모에게 flex를 주고 자식에게 margin: 0 auto;를 따로 줄 이유는 없기 때문이다.
