css flexbox froggy 사이트를 통해 flex box를 학습했다.
정말 직관적으로, 재미있게, 빠르게 습득 할 수 있었다.
꼭 한 번 해보길 추천한다!
그리고 해보고
를 눌러보길 바란다, 상세하게 정리해두셨다.
css - flexbox
justify-content : 가로 정렬
요소를 가로선 상에서 정렬한다.
1. flex-start (default 값)
요소들을 컨테이너의 왼쪽으로 정렬한다.(시작점)
2. flex-end
요소들을 컨테이너의 오른쪽으로 정렬한다.(끝점)
3. center
요소들을 컨테이너의 가운데로 정렬한다.
4. space-between
요소들 사이에 동일한 간격을 둔다.
5. space-around
요소들 주위에 동일한 간격을 둔다.
6. space-evenly
align-items : 세로 정렬
요소를 세로선 상에서 정렬한다.
1. flex-start
요소들을 컨테이너의 꼭대기로 정렬한다.
2. flex-end
요소들을 컨테이너의 바닥으로 정렬한다.
3. center
요소들을 컨테이너의 세로선 상의 가운데로 정렬한다.
4. baseline
요소들을 컨테이너의 시작 위치에 정렬한다.
5. strech (default 값)
요소들을 컨테이너에 맞도록 늘린다.
flex-direction : 정렬 방향 지정
컨테이너 안에서 요소들이 정렬해야 할 방향을 지정한다.
1. row (default 값)
요소들을 텍스트의 방향과 동일하게 정렬한다.
2. row-reverse
요소들을 텍스트의 반대 방향으로 정렬한다.
3. column
요소들을 위에서 아래로 정렬한다.
4. column-reverse
요소들을 아래에서 위로 정렬한다.
* 주의 : flex의 방향이 column일 경우,
justify-content의 방향이 세로로,
align-items의 방향이 가로로 뒤바뀐다.
* 주의 : row-reverse, column-reverse
를 사용하게 되면, 요소들의 start와 end의 순서도 뒤바뀐다.
order : 개별 순서 지정
컨테이너의 row나 column의 순서를 역으로 바꾸는 것 만으로 충분하지 않을 때,
order속성을 각 요소에 적용해 순서를 바꿀 수 있다.
order의 기본값은 0이며, 양수나 음수로 바꿀 수 있다.
양수일 경우 오른쪽으로 이동하고,
음수일 경우 왼쪽으로 이동한다.
- 문제 1.
#pond {
display: flex;
}
.yellow {
}
#pond {
display: flex;
}
.yellow {
order : 1
}
- 문제 2.
#pond {
display: flex;
}
.red {
}
#pond {
display: flex;
}
.red {
order : 1;
}
#pond {
display: flex;
}
.red {
order : -1;
}
align-self : 개별 요소 세로 정렬
align-self는 개별 요소에 적용할 수 있는 속성이다.
align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용된다.
- 문제 1.
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
align-self : flex-end;
}
- 문제 2.
#pond {
display: flex;
align-items: flex-start;
}
.yellow{}
#pond {
display: flex;
align-items: flex-start;
}
.yellow{
order : 1;
}
#pond {
display: flex;
align-items: flex-start;
}
.yellow{
order : 1;
align-self : flex-end;
}
flex-wrap : 요소 정렬
요소들을 한 줄 또는 여러 줄에 걸쳐 정렬한다.
1. nowrap (default 값)
모든 요소들을 한 줄에 정렬한다.
2. wrap
요소들을 여러 줄에 걸쳐 정렬한다.
3. wrap-reverse
요소들을 여러 줄에 걸쳐 반대로 정렬한다.
flex-flow
flex-direction과 flex-wrap이 자주 같이 사용되기 때문에,
flex-flow가 이를 대신할 수 있다.
이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받는다.
flex-flow : <flex-direction> <flex-wrap>;align-content
여러 줄 사이의 간격을 지정할 수 있다.
align-content는 여러 줄들 사이의 간격을 지정하며,
align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정한다.
한 줄만 있는 경우, align-content는 효과를 보이지 않는다.
1. flex-start
여러 줄들을 컨테이너의 꼭대기에 정렬한다.
2. flex-end
여러 줄들을 컨테이너의 바닥에 정렬한다.
3. center
여러 줄들을 세로선 상의 가운데에 정렬한다.
4. space-between
여러 줄들 사이에 동일한 간격을 둔다.
5. space-around
여러 줄들 주위에 동일한 간격을 둔다.
6. stretch(default 값)
여러 줄들을 컨테이너에 맞도록 늘린다.
다음은 grid를 배워야겠다 !
