flex를 이용한 게시판

flex는 유연한이라는 뜻으로 css에서 block들을 가로나 세로, 혹은 역방향으로 세워놓는 것을 말한다.

이번 근로를 하면서, flex를 사용하게 되었다. 게시판 형태의 content들이 가로 방향으로 3개씩 있어야 했다. content의 사이즈는 고정값이 었다. 3개씩 두는 방법을 찾고자 구글링을 하는데, flex를 공부하는 사이트를 알게 되었다.

flex를 단기간에 공부해야 하면 아래 사이트를 참조하면 좋을것 같다.

http://flexboxfroggy.com/

flex에 아무런 제한을 두지 않고 content를 늘려가면, 각 content들의 width값이 줄어들면서 한 줄로 서있는 것이 문제였다.

위 사이트를 참고한 결과, flex-wrap 이란 속성을 사용하면 된다.

default 값은 nonwrap인 것 같다.

.html 

<div class="container"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> </div>

.css 

.container { width : 800px; height: auto; display: flex; flex-wrap: wrap; } .content { width: 250px; margin-left: 50px; margin-right: 50px; }

위와 같은 상황이면 container의 width가 800px이기 때문에 content가 한 줄에 두 개 이상 있을 수 없다.

이때 container에 flex-wrap: wrap을 설정해주면, 3번째 content는 아래로 내려가는 것을 알 수 있다.

flex-wrap을 설정하지 않은 경우

1

2

3

flex-wrap을 설정한 경우

1

2

3