728x90
반응형
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
728x90
반응형
'Coding With Jina > CSS' 카테고리의 다른 글
| [CSS] 태그 기본 스타일 초기화 - all속성 unset (0) | 2022.11.06 |
|---|---|
| [CSS] a태그 기본 스타일 없애기/ a 태그 기본스타일초기화 - 밑줄 없애기, 색상 없애기 (0) | 2022.10.20 |
| [CSS] Font Awesome 아이콘 보이지 않을때 해결법 (0) | 2022.10.13 |
| [CSS] 버튼 디자인 없애기 / 버튼 기본 CSS 없애기 (0) | 2021.02.16 |
| [CSS] 항상 하단에 고정하기 (0) | 2021.02.15 |