flexcss5 아이템(div)의 너비 설정하기 - flex item 속성(2) 얼마 전에 flex css 속성들에 대해 포스팅하기로 했었는데 flex item 속성(1)까지 포스팅을 하고 그 후로 시간이 꽤 지났다. (이런 저런 일들로 너무 바빴...) 늦었지만 마무리는 해야하니까 오늘은 flex item 속성 제 2탄! 지난 번에 item 정렬과 순서를 설정하는 css를 알아보았다면 오늘 소개할 아이들은 item 너비와 관련된 css 들이다. 2020/10/29 - [개발자 꿈나무/CSS] - flex 기초 - flex란 무엇인가? 2020/11/06 - [개발자 꿈나무/CSS] - 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) 2020/11/07 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 여백 설정하기 - flex .. 2021. 1. 1. 아이템(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. flex 기초 - flex란 무엇인가? 웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용한다. 그런데 이러한 속성들로 레이아웃을 구현하는 게 몹시 복잡하거나 어려울 때가 있다. 그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었다. flexible box, flexbox라고도 부르는 flex는 레이아웃 배치 기능에 중점을 맞추어 고안되었기 때문에 기본 방식보다 훨씬 더 수월하게 퍼블리싱이 가능하다. flexbox는 부모 요소인 flex container와 자식 요소인 flex item으로 구성된다. flex container가 flex 태그의 영향을 받는 공간이고, 그 안에서 flex item들의 배치, 정렬이 설정된 속성에 따라 변경되는 것이다. flex 시작하.. 2020. 10. 29. 이전 1 다음
