display: flex
- 부모 박스에 적용한다.
- 자식 박스의 방향과 크기를 결정한다.
HTML
HTML <body> <div>box1</div> <div>box2</div> <div>box3</div> </body>
- body태그는 div태그들의 부모
- div태그들은 body태그의 자식
- box1, 2, 3들은 형제 태그
CSS
body { display: flex; }
위와 같이 적용시 body태그의 자식인 div태그들이 왼쪽부터 가로로 정렬되며 내용의 크기만큼 공간을 차지한다.
flex-direction
- 자식들을 정렬할 축을 지정한다.
body { display: flex; flex-direction : row; }
- row : 왼쪽 위에서부터 오른쪽으로 다 채우면 아래쪽으로 줄이 바뀌면서 채워 나간다.
- column : 왼쪽 위에서부터 아래로 다 채우면 오른쪽으로 줄이 바뀌면서 채워 나간다.
- row-reverse : 오른쪽 위에서부터 왼쪽으로 다 채우면 아래쪽으로 줄이 바뀌면서 채워 나간다.
- column-reverse : 왼족 아래서부터 위로 다 채우면 오른쪽으로 줄이 바뀌면서 채워 나간다.
justify-content
- 자식들이 정렬된 축과 수평으로 방향에 따라 정렬할 방향을 지정한다.
- 자식들이 정렬된 축이 가로면 가로방향을 기준으로 한다.
- 자식들이 정렬된 축이 세로면 세로방향을 기준으로 한다.
body { display: flex; flex-direction : row; justify-content : flex-start }
- flex-direction가 row면 가로방향으로 column이면 세로방향을 기준으로 한다.
row 기준의 flex-direction
- flex-start : 왼쪽으로 정렬
- flex-end : 오른쪽으로 정렬
- center : 가운데 정렬
- space-between : 사이드 여백없이 일정간격으로 정렬
- space-around : 사이드 여백 있이 일정간격으로 정렬
align-items
- 자식의 축과 수직으로 방향에 따라 정렬할 방향을 지정한다.
- 자식들이 정렬된 축이 가로면 세로방향을 기준으로 한다.
- 자식들이 정렬된 축이 세로면 가로방향을 기준으로 한다.
body { display: flex; flex-direction : row; align-items : stretch }
row 기준의 flex-direction
- flex-direction가 row면 세로방향으로 column이면 가로방향을 기준으로 한다.
정리노트