CSS Flexbox: space 속성 적용 예시
카테고리 없음 2020. 12. 28. 01:57

flexbox 간 공백을 주는 방법으로 justify-content와 align-content의 space-속성값을 이용할 수 있다. jusity-content가 중심축을 기준으로 하는 배치 방식을 결정한다면 align-content는 반대축을 기준으로 하는 배치 방식을 결정한다. space-around, space-evenly, space-between 이 3가지 방법의 차이를 예시를 통해 비교해보고자 한다. jusify-content: space-around; (box를 둘러싼 공백 생성, 공백이 겹치는 구간과 그렇지 않은 부분의 너비가 달라짐) jusify-content: space-evenly; (동일한 공백을 생성) jusify-content: space-between; (box 간에만 공백을 ..

CSS Flex box : flex-direction:reverse;/justify-content:flex-end; 비교 예시
개발 2020. 12. 28. 01:45

flex-direction : flexbox 배치 방향을 결정하는 방식 justify-content : 중심축에서 아이템을 배치하는 방식 flex-direction: row; flex-direction: row-reverse; justify-content : flex-start; justify-content : flex-end; justify-content : center;