css 화면 크기에 따라 줄 바뀌게 하는 법

한줄로 사진 등이 정렬된 경우 화면이 작아짐에 따라 크기가 축소되는 것이 아닌 
아래로 줄바뀜이 되도록 하고 싶을 때가 있다. 
이럴 때에는 flex-wrap 속성에 wrap 값을 활용한다. 

ex) flex-wrap 예시

html

<div class="container">
  <div class="images">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
  </div>
</div>

 

css

.images {
  display: flex;
  flex-wrap: wrap;
}
.image {
  height: 100px;
  width: 100px;
  margin: 100px;
  background-color: black;
}