개요 보통 요소를 나열하려고 flex 를 사용하다 보면 자식 요소의 개수가 가변적으로 늘거나 줄어들 때를 고려해서 자식 요소의 크기를 결정하지 않고 나열해야 할 때가 있다 이 때 가변적인 수의 자식 요소의 크기를 동일(균등)하게 설정하고 싶다면 flex-basis 의 값을 0으로 설정하여 자식요소의 기본 넓이를 없애면 된다. 예제 보통은 자식요소에 아래와 같이 설정해서 많이 사용하게 된다 .element { flex: 1 1 auto; /* 위는 아래의 축약형 flex-grow: 1; flex-shrink: 1; flex-basis: auto; */ } 한데 이럴 경우 자식요소 내부 요소의 길이에 따라 자동으로 크기가 결정되기 때문에 자식요소들이 동일한 크기로 설정되지 않는 경우가 많다. 자식요소의 내부..
Flex
개요 보통 요소를 나열해야 하는 경우 예전 IE 를 고려하던 시절에는 간격(여백)을 주기위해 아래와 같은 방법을 썼다 나열되는 요소에 padding 또는 margin 으로 좌우 간격을 주고 부모요소에서 margin 을 마이너스(-) 주기 나열되는 요소에 오른쪽 마진 (margin-right) 또는 왼쪽 마진 (margin-right)을 주고 처음 또는 마지막 요소에는 마진을 0으로 설정하기 하지만 이럴 경우 부모 요소에서 스타일을 주어야 하고 고정적이지 않은 요소의 수일 경우 마지막 여백 등으로 인해 css 를 여러번 써야하는 경우가 생긴다 특히 요소를 display:inline-block 해야하고 inline-block 을 사용하다보면 부모의 font-size 에 영향을 받는 경우가 생겨서 css 가 ..
보통 스크롤이 없는 height 100% 페이지를 구현하다 보면 내부에 컨텐츠가 많아져 내부 스크롤바가 필요할 경우가 있다. 이론적으로는 flex 를 사용하면 당연히 가능할 것 같은데 막상 구현하다 보면 생각과는 다르게 동작하지 않는 경우가 있다 기본적인 구조는 아래와 같이 구현할 경우 헤더 컨텐츠 내용이 늘어나서 줄이 길어 집니다. 내용이 늘어나서 줄이 길어 집니다. ............ 푸터 위와 같이 구현할 것이다. 한데 flex 로 이루어진 레이아웃 안에서 다시 flex 를 이용해 자식요소를 flex-basis: auto 를 이용해 고정 pixel 이 아닌 auto 로 여백을 채울경우 제대로 동작하지 않는다. See the Pen flex 내부 flex 로 height : auto 및 scrol..
