display : flex 에대해서 - 1.flex-wrap

flex : 1 을 검색 해서 오신 부은 아래 링크의 글을 보시기 바랍니다.

https://sh-sida.tistory.com/66?category=672722 

display : flex 에대해서 - 2.flex-grow, flex-basis

 

display 속성중에 flex 는 익스플로러는 10부터 적용이 가능하며 최근 최신 브라우저만 대응 하는 프로젝트에서는 사용 할 수가 있습니다.

 

flex는 관련 속성들이 많아서 천천히 하나씩 포스팅 할 계획입니다. 

 

먼저 태그에 display: flex를 주면 그 태그 안에 자식 태그 들이 어떻게 나타나는지 확인을 하겠습니다.

 

일단 다음과 같은 구조의 html이 있습니다. (태그 구분을 위해 부모 div에 background: gold, ul에 background: coral, li에 background: orange에 보더를 추가 하였습니다.)

 

 

 

 

이 상태에서 ul 태그에 display:flex를 추가 하고 화면을 확인 하면 다음과 같이 나옵니다.

 

 

li가 float : left를 준것 처럼 옆으로 붙고, width는 글자 길이만큼 적용 된것을 확인 할 수 있습니다.

 

 

이 상태에서 li 개수를 하나씩 늘리면서 확인 을 해보면  다음과 같이 나옵니다.

li가  갯수가 늘어 날때마다 13개까지는 li의 width를 자동으로 줄이면서 부모인 ul에 꽉 맞춰 가는 것을 확인 할 수  있습니다.

 

 

그런대 하단의 이미지를 보시면

li 의 width가 더이상 줄 수가 없는 상태에서  li의 개수가 늘어나면 부모의 영역을 침범하면서 계속 옆으로 가는걸 확인 할 수 있습니다.

 

 

 

그러면 부모의 영역 안에서 자동으로 줄맞춤 을 해 보겠습니다.

자동으로 줄맞춤을 하려면 ul태그에 display: flex; 다음으로 flex-wrap : wrap 을 적용 하면 다음 과 같이 ul의 width 안에서 li가 줄 맞춤 되는것을 확인 할 수 있습니다.

 

flex-wrap 속성에 대한 설명은 하단의 링크에서 설명이 잘되어 있기 때문에 추가 설명은 생략 하겠습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap  

 

 

 

 

위 내용은 책 - 새로운 CSS 레이아웃 의  예제의 내용을 부분적으로 참고하여 다시 한번 정리한 내용입니다.

 

 

그밖의 display 속성 정리 포스팅 글

https://sh-sida.tistory.com/category/html%2C%20css/css-display%EC%86%8D%EC%84%B1%EB%93%A4%20%EC%A0%95%EB%A6%AC

'html, css/css-display속성들 정리' 카테고리의 글 목록