[CSS] flex 사용법

container {

display : flex; // flex box로 만들기

flex-direction : row; // default

flex-wrap : nowrap // default >> window크기 조절 시 자동 줄 바꿈 지원

justify-content : space-around; >> 일정 간격으로 item 자동 맞춤

justify-content : space-between;

/* justify-content >> 중심 축에 대한 정렬 */

/* align-items >> 반대 축에 대한 정렬 */

}

item {
flex-grow : 0 //default >> window 크기 조절 시 item크기조절 일어나지 x

/*1,2,3 등으로 조절되는 비율을 정할 수 있음.*/

flex-shrink : 0 //default >> grow와 유사

flex-basis : 10% >> container의 width값에 따라 크기를 조절함.

align-self : center; // 하나만 center지정

}

댓글을 작성해보세요.

채널톡 아이콘