* { margin: 0; padding: 0; } .wrapper { width: 100%; border: 8px solid red; box-sizing: border-box; display: flex; flex-flow: column nowrap; align-items: center; } header, section, article, footer { width: 600px; } header { height: 50px; background-color: mediumslateblue; } section { height:100px; background-color: midnightblue; } article { height: 100px; background-color: cornflowerblue; } .foo..

* display: flex / inline-flex; flex cotainer를 정의해준다. item들은 각각의 내용물 넓이만큼 수평정렬된다. inline-flex는 container의 속성에 inline 속성을 추가한 것이다. item들이 나열된 축을 메인축이라 하고, main 축과 수직을 이루는 축을 교차축이라 한다. * flex-direction: row(기본) / column / row-reverse / column-reverse; 메인축 방향을 지정해준다. 각 속성의 방향은 다음과 같다. row → column ↓ row-reverse ← column-reverse ↑ 여기서 신기한 것은 대한민국의 경우 글을 왼쪽에서 오른쪽으로 쓰지만 아랍권에서는 오른쪽에서 왼쪽으로 쓰기 때문에 row의 경우..