[1.1]first Rule of Flexbox
felxbox 규칙
1. Children을 이야기하지 않는다.
2. flexbox를 위해서는 flex container가 필수.
3. box의 부모가 flex 컨테이너이며, 부모는 바로 상위의 부모여야한다.
[1.2]main Axis and Cross Axis
flexbox 레이아웃의 정렬을 이해하는데 가장 중요한 역할을 하게 됩니다. 주축(main axis)의 방향과 교차축 (cross axis)의 방향을 결정하는 flex-direction 의 설정을 이해하셔야 합니다.
justify-content: flex-start, flex-end, center, space-between, space-around
align-items ; flex-start, flex-end, center
참고 https://usingu.co.kr/references/css/flexbox-layout/
[1.3] Column and Row
[1.4] align-self and order
.child:nth-child(2) {
align-self: center;
}
2) order : 자식들의 순서를 바꿔준다. 초기값은 0
.child:nth-child(1) {
order:2;
}
[1.5]wrap, nowrap, reverse, align-content
wrap가 설정되어 있지 않으면, 자식요소가 width를 갖더라도 무시하고 한줄에 정렬
width 자체를 줄여버림
1) wrap : Width를 반영하여, 화면보다 길어지면 넘어가게 반영
.father {
flex-wrap: wrap / nowrap / reverse
}
2) align-content <-> align-item, justify-content
.father {
align-content: center, space-around, space-between
}
[1.6] flex-grow, flex-shrink
1) flex-shrink: flexbox가 쥐어짤 때, element의 행동의 정의함
ex) flex-wrap: nowrap일때, 화면이 작아지면 width가 설정되어 있어도 줄어듦.
초기값 1
.child:nth-child(2){
flex-shirk: 2;
}
2) flex-grow: shrink와 반대, 화면이 늘어남에 따라 box 크기가 얼마나 늘어날까?
초기값 0
.child:nth-child(2){
flex-grow: 2;
}
[1.7]flex-basis
.father{
felx-basis: 300px;
}