[CSS] flex 사용법
2021.07.05
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지정
}
댓글을 작성해보세요.