Monthly Archives: May, 2017

    CSS flexible 레이아웃: flex item의 정렬과 간격

    flex item의 팽창과 수축, flex item의 방향과 순서에 이어 오늘은 ‘flex item의 정렬과 간격‘에 관하여 설명합니다. 먼저 진행 축(main axis)과 교차 축(cross axis)을 이해할 필요가 있습니다. ‘진행 축’이란 flex item이 배치되는 축(x/y)을 의미합니다. ‘교차 축’이란 flex item이 배치되는 방향과 90도 교차하는 축을 의미합니다. 진행 축과 교차 축은 상대적인 개념이라서 flex-direction의 값(row, column)에 따라 교차 축이 바뀌기 […]

    CSS flexible 레이아웃: flex item의 방향과 순서

    이전에 “CSS flexible 레이아웃: flex item의 수축과 팽창” 이라는 포스트를 작성했는데요. 오늘은 flex item의 방향과 순서를 설명합니다.  오늘 설명할 속성은 flex item의 방향을 제어하는 flex-direction, 줄 바꿈을 제어하는 flex-wrap, 그리고 방향과 줄 바꿈을 단축 속성으로 제어하는 flex-flow, 배치 순서를 제어하는 order 라는 속성입니다. 예제를 보면서 이해하기에 충분하므로 자세한 설명은 생략합니다. flex item의 ‘방향’을 제어하는 ‘flex-direction’. […]