응답 디자인 기본part2~flex-wrap:wrap;

지난번에 나는 첫걸음을 내디뎠다⤵︎
https://qiita.com/zakaryo/items/ee0a799f4d1bb61f2517
이번에는 그냥 돌려서 할게요.
디스플레이를 flex로 설정하고 가로로 정렬할 수 있어도
계속 이러면 하위 요소의 내용이 늘어날 때 끊임없이 채워진다.
이런 느낌.
style.css

 .container {
display: flex;
}
.box {
width: 300px;
height: 300px;
margin: 10px 5px;
}

300x300의 정사각형을 배열하려고 했는데 화면이 가득 차서 축소되었다.
따라서flex-wrap:wrap;사용자 정의 모양새를 정의합니다.
style.css

 .container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 300px;
height: 300px;
margin: 10px 5px;
}

이러면 이렇게 되는 거야.

이렇게 억지로 넣는 것이 아니라,width:30px;적용됨
노출된 부분은 한 토막 아래로 떨어진다.
또한 부모 요소에 max-width를 지정하면 1단에 몇 개의 하위 요소를 넣을지 결정할 수 있습니다.
style.css

 .container {
display: flex;
flex-wrap: wrap;
max-width:700px;
}
.box {
width: 300px;
height: 300px;
margin: 10px 5px;
}

실제로 아래는 하위 원소의 몇 분이다.
이렇게 하면 flexbox에서 돌아올 수 있겠지.