[CSS] flexbox 보충

Flexbox

1. flexbox를 쓰고 싶어!

display: flex;

를 하고 본다!

ex )
박스 3개를 그렸다고 했을 때,
ㅁㅁㅁ 이렇게 가로로 붙어서 그려짐

2. 가로로 위치를 조정하고 싶어!

justify-content : ~~~;

• flex-start : 화면 젤 왼쪽에 위치
• flex-end : 화면 젤 오른쪽에 위치
• flex-center : 화면 가운데에 위치
• space-around : 화면 테두리에서 살짝 떨어짐 | ㅁㅁㅁ |
• space-between : 각 요소들이 같은 너비만큼 공간을 두고 떨어짐 |ㅁ ㅁ ㅁ|

3. 세로로 위치를 조정하고 싶어!

align-items : ~~~;

• flex-start : 화면 젤 왼쪽에 위치
• flex-end : 화면 젤 오른쪽에 위치
• flex-center : 화면 가운데에 위치

💥 align일때는 space 기능이 없다.

가로정렬이 아닌 세로정렬로 바꿀래!

flex-direction : column;

column을 기준으로 하겠다는 의미!

ex)
박스 3개를 그렸을 때,
ㅁ
ㅁ
ㅁ
이렇게 그려줌

퀴즈

display: flex;
flex-direction : column;
justify-content : space-between;

이 경우 박스의 위치는 ?

정답

ㅁ

 

ㅁ

 

ㅁ

==> 세로에서도 space가 적용된다!
✔️ 기준이 세로이기 때문