css flex?

flex란 유연성을 뜻하는데 CSS에서 flex box라는 개념이 생겼습니다. 요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아봅니다.

display:flex

블록 레이아웃, 인라인 레이아웃, 테이블 레이아웃 및 위치 지정 레이아웃 모드와 더불어 CSS3에서는 보다 복잡한 블록 타입 레이아웃 모드인 flexbox 레이아웃을 지원한다. flexbox의 콘텐츠는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다.

과거 문법 display: box(old)와 같이 사용되다가 비공식적인 문법으로 display: flexbox(hybrid)와 같이 사용되었다. 근래에 명세에는 display: flex(modern)가 되었다.

IE와 그 밖의 브라우저에서 사용하는 flex 속성이 사용법이 조금 다르다. IE는 display: flexbox를 지정하고 다른 브라우저는 display: flex를 지정한다. 아래에 링크를 참조하여 flexbox를 살펴볼 수 있도록 하자.

• flexbox 완벽 가이드
• flexbox 구버전과 신버전 브라우저 지원을 위한 최고의 방법
• IE flexbox 참고 자료

flexbox 레이아웃을 구성할때 콘텐츠를 감싸는 부모요소에 이 속성을 지정한다.

Html

<style>
  .container {
    display: flex;
  }
</style>

<div class="container">
  <nav>1</nav>
  <section>2</section>
  <aside>3</aside>
</div>

원래라면 html문서에

1

2

3

이렇게 나와야되는데

1 2 3 이렇게 나오는걸 볼 수 있음.

설명을 보면,

flexbox의 콘텐츠는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다.

라고 나와있는데 디폴트 가로 방향으로 위치하게 하게 되있는듯 함.

이걸 이용하면 레이아웃을 층층이 쌓는걸

일일히 float: left; display:block; 을 써서 일일이 안하고 편하게 레이아웃 디자인을 할 수 있어 보임.

알고 있는 개념이지만 다시보니 까먹어서 복습차 정리해봄..하하

 

출처: https://webdir.tistory.com/349 [WEBDIR:티스토리]