flexbox기본사용법을 좀 쉽게 설명을 드리자면
일단 flexbox 사용할라면 부모요소에 display: flex를 설정하는게 젤 기본이랍니다.
그리고나서 flex 컨테이너에 적용할 수 있는 중요한 속성들이 있는데
flex-direction으로 아이템들의 배치 방향을 정할 수 있어요
justify-content는 메인축 방향으로 아이템들을 어떻게 정렬할지 결정하는건데
center나 space-between 같은 값들을 많이 사용하죠
align-items는 수직축 방향으로 아이템들을 정렬하는 방법을 정하는 속성인데
보통 center나 stretch를 많이 써요
flex-wrap은 아이템들이 한 줄에 다 안들어갈 때 어떻게 처리할지 정하는 건데
wrap으로 설정하면 여러 줄로 나눠서 표시된답니다
자식 요소들에는 flex-grow나 flex-shrink 같은 속성으로
늘어나고 줄어드는 비율을 조절할 수 있어요
flex-basis로는 아이템의 기본 크기를 지정할 수 있는데
이건 flex-direction에 따라 너비나 높이가 된답니다
제가 자주 쓰는 기본적인 flexbox 코드를 보여드릴게요
.container {
display: flex;
justify-content: center; /* 가운데 정렬 */
align-items: center; /* 수직 가운데 정렬 */
flex-direction: row; /* 가로 방향 배치 */
flex-wrap: wrap; /* 넘치면 여러 줄로 */
}
.item {
flex: 1; /* flex-grow: 1과 같음 */
/* 또는 더 자세하게 지정할 수 있어요 */
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}