> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/undefined/undefined-11.md). # 플렉시블 레이아웃 ## 플렉시블 레이아웃 (Flexible Layout) ```markup
F
L
E
X
``` ```css .flex-container { display: flex; /* 기본값 flex-direction: row */ } ``` ## 플렉스 축(Axis) * 주축 : Main Axis * 교차축 : Cross Axis 주축은 row, row-reverse 방향으로 설정한다. ![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRW5k105kFN6eB1FMaj%2F-MRW5sNt7Ccy1iXkXMGu%2Fimage.png?alt=media\&token=b3ebb2ce-08fc-4bc9-994f-769501d02aa7) 교차축은 column, column-reverse 방향으로 설정한다. ![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRW5k105kFN6eB1FMaj%2F-MRW5v3sl2iobz-0zoFl%2Fimage.png?alt=media\&token=a14b2214-26fe-43a3-aa02-30c74dcf8d12) ## 참고 * CSS 모던 레이아웃 - Flexbox 인터랙티브 플레이그라운드 :