display:flex

음..css 공부를 안하고 바로 프론트로 '공부하면서 프로젝트 해보지 뭐' 했다가 화면이 다 깨지는경험을 했다.

margin, padding 쓰지말고 display나 grid를 쓰라고하는데

그게 뭐지

display: flex

CSS의 속성 중 하나로, 해당 요소를 플렉스 컨테이너로 만드는 역할을 합니다. 이를 통해 자식 요소들을 플렉스 아이템으로 배치할 수 있다.
플렉스 컨테이너를 설정하면 해당 요소의 자식 요소들을 수평 또는 수직으로 배치하고 정렬할 수 있으며, 플렉스 박스 레이아웃은 요소들을 좀 더 효율적으로 배치하고 정렬할 수 있도록 도와준다.

justify-content

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

align-items

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

flex-direction

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

개념자체랑 어떻게 작동하는지는 알겠는데 손이 잘 안간다.

퍼블리셔를 하셨던 팀원이 나에게 개구리 문제를 풀어볼것을 추천하셨다.

바로 풀어보러 간다.

[Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com](https://flexboxfroggy.com/#ko)

2023-06-24