728x90 Flex2 HTML/CSS - flex(2) 안녕하세요, 지난 시간에 정리하였던 container에 부여하는 flex 속성에 이어서 오늘은 items에 적용하는 속성들에 대해 간단히만 정리하려 합니다! Items -. order : Item의 순서를 설정 (기본값 : 0) -. flex-grow : Item의 증가 너비 비율을 설정 (숫자가 클수록 큰 너비를 차지) (기본값 : 0) -. flex-shrink : Item의 감소 너비 비율을 설정 (숫자가 클 수록 큰 너비가 줄어듬) (기본값 : 1) -. flex-basis : Item의 (공간 배분 전) 기본 너비를 설정 (기본값 : auto / item 안의 요소의 너비가 item의 기본 너비에 비례) flex-basis만 간단히 코드와 결과 화면으로 확인해보겠습니다. Good job A He.. 2021. 6. 9. HTML/CSS - flex(1) 안녕하세요, 드디어! flex를 정리하려 합니다. 이때까지 수평 정렬을 하기 위해 display: inline-block;이나 float: left;를 사용하는 법에 대해 공부했었는데요, 이번에 정리할 flex를 배우게 되면 아주 손쉽게 수평/수직 정렬이 가능합니다! 간단히 block 속성 값을 갖는 div태그들을 flex를 이용하여 수평 정렬하는 것을 확인해보겠습니다. 아래 코드와 같이 container에 flex속성 값을 주는 것만으로 수평 정렬이 일어났습니다! (여기서 container의 자식 클래스인 item에 display: flex;를 적용하면 수평 정렬이 일어나지 않습니다! 이것은 container에 flex속성 값을 부여해야지 item개념이 생기기 때문인데요, 아래에서 추가 설명드리겠습니다.. 2021. 6. 8. 이전 1 다음
