Hi

플렉스 항목의 배치 순서 바꾸기 order: 0 | 숫자 0이면 소스에 입력한 순서대로 배치.숫자로 하면 그 순서에 따라 배치. box1 box2 box3

플렉스 방향과 여러 줄의 배치를 한꺼번에 지정하기 flex-flow: flex-flow: row; /* 왼쪽에서 오른쪽으로, 한줄에 표시*/flex-flow: column wrap; /* 위에서 아래로, 여러 줄에 표시 */

flex-wrap: no-wrap | wrap | wrap-reverse 플렉스 항목을 한 줄 또는 여러 줄로 배치하기 속성 값 설명 no-wrap 플렉스 항목들을 한 줄에 표시합니다. 기본 값 wrap 플렉스 항목을 여러 줄에 표시 wrap-reverse 플렉스 항목을 여러 줄에 표시하되 기존 방향과 반대로 배치 #container { width: 500px; height: 300px; margin: 0 auto; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; border: 2px solid black; }

플렉스 방향 지정하기 플렉스 컨테이너를 지정했다면 플렉스 항목을 배치할 방향을 알려주어야 함. flex-direction: row | row-inverse | column | column-inverse 1 2 3

display: flex | inline-flex 속성 값 설명 flex 플렉스 박스를 박스 레벨 요소로 정의 inline-flex 플렉스 박스를 인라인 레벨 요소로 정의 출처 : Doit! html5 +css3 웹표준의 정석

css 파일 삽입하기ex)