div정렬3 아이템(div) 정렬과 순서 설정하기 - flex item 속성(1) 지난 포스팅에서는 flex와 flex-container(부모 요소)에 사용할 수 있는 속성들에 대해 알아보았다. 2020/10/29 - [개발자 꿈나무/CSS] - flex 기초 - flex란 무엇인가? 2020/11/06 - [개발자 꿈나무/CSS] - 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) 2020/11/07 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 여백 설정하기 - flex container 속성(2) 이번 포스팅에서는 flex-item(자식 요소)에 사용할 수 있는 속성 중에서 순서, 정렬을 변경하는 css에 대해 설명할 예정이다. order item의 순서를 설정하는 css이다. 숫자가 클수록 순서가 밀리며 음수, 0, 양수.. 2020. 11. 13. 아이템(div) 정렬과 여백 설정하기 - flex container 속성(2) div 박스의 사이 간격을 동일하게 하고 싶다면? 내부 컨텐츠 길이에 상관없이 div 박스가 동일한 넓이를 갖게 하고 싶다면? 이번 포스팅은 이러한 물음들에 대한 좋은 해결책이 될 것이다. 이번에 소개할 css 태그 모두 지난 포스팅과 마찬가지로 flex container에 적용 가능한 속성이다. justify-content 수평축의 정렬 방법을 설정하는 css이다. 속성값은 아래와 같다. .flex_container { justify-content: flex-start; /* 기본값, 아이템을 시작점으로 정렬 */ justify-content: flex-end; /* 아이템을 끝점으로 정렬 */ justify-content: center; /* 아이템을 가운데 정렬 */ justify-content: .. 2020. 11. 7. 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) flex css 제 2탄! 오늘은 flex container에 사용할 수 있는 속성 중에서 item(div)을 수직/수평 정렬하는 방법에 대해 소개하려고 한다. 더해서 브라우저 사이즈에 따라 줄바꿈 여부를 결정하는 css도 함께 알아두면 도움이 될 것이다. flex-direction item을 수평(가로) 정렬할 것인지, 수직(세로) 정렬할 것인지 결정하는 css 이다. .flex_container{ flex-direction: row; /* 기본값, 아이템을 왼쪽에서 오른쪽으로 수평 정렬함 */ flex-direction: row-reverse; /* 아이템을 오른쪽에서 왼쪽으로 수평 정렬함 */ flex-direction: column; /* 아이템을 위에서 아래로 수직 정렬함 */ flex-dire.. 2020. 11. 6. 이전 1 다음
