flexbox 로 만들 수 있는 10가지 레이아웃

 

flexbox를 활용한 10가지 레이아웃 사례

이 글에서는 실무에서 많이 사용하는 다음 10가지 레이아웃을 flexbox로 구현하는 방법을 소개한다. 이 레이아웃은 기존의 display속성이나 float 속성, position 속성 등으로는 구현이 어렵거나 구현이 불가능하다. 하지만 flexbox를 사용하면 쉽게 구현할 수 있다.

• 레이아웃 1 - 스크롤 없는 100% 레이아웃
• 레이아웃 2 - 내비게이션 영역
• 레이아웃 3 - 브라우저 화면 아래에 붙는 푸터
• 레이아웃 4 - 정렬이 다른 메뉴
• 레이아웃 5 - 폼 레이블 수직 중앙 정렬
• 레이아웃 6 - 중앙 정렬 아이콘
• 레이아웃 7 - 유동 너비 박스
• 레이아웃 8 - 말줄임과 아이콘
• 레이아웃 9 - 위아래로 흐르는 목록
• 레이아웃 10 - 가로세로 비율을 유지하는 반응형 박스

 

 

 

참고 블로그:https://d2.naver.com/helloworld/8540176#ch2