[CSS] Flexbox - 기본개념
안녕하세요 냥장판 입니다
이번 게시글에서는 CSS Flexbox 라는 개념에 대해서 알아볼 거에요.
1. Flexbox
Flexbox는 Flexible Box Layout을 말해요
Flexbox란 정렬, 방향, 순서, 사이즈 등 사용자 인터페이스 디자인에 최적화된 Box model 라고 보시면 됩니다.
2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - 기본 요소
[CSS] Box Model - 기본 요소
안녕하세요 냥장판 입니다 지난 게시글에 이어서 CSS에 Box Model에 대해서 알아볼게요. HTML에는 태그/요소들이 있죠. (둘이 같은말입니다) 모든 요소들은 공간을 차지하고, 이 면적을 결정하는 데 필요한 개념..
miaow-miaow.tistory.com
각 box model 간에 유기적인 layout을 나타낼 수 있어요.
예를 들면 정렬, 방향, 사이즈 등을 flexbox로 나타낼 수 있어요
flexbox를 위해 제공되는 속성은 아래와 같습니다.
1. display
2. flex-direction
3. justify-content
4. align-items
5. flex-wrap
6. flex-flow
7. align-content
또한, flex items를 위해 제공되는 속성은 다음과 같습니다.
8. order
9. align-self
10. flex
style="display:inline-block;width:740px;height:200px"
data-ad-client="ca-pub-9512983930357661"
data-ad-slot="5785466884">
2. Float와 Flexbox의 차이점
Float는 block을 어디에 어떻게 배치하는지에 대해서 집중한다면,
Flexbox는 전체 페이지 내 box model의 레이아웃 구조에 초점을 맞춰요.
Float에 대한 게시글은 아래를 참고하시면 되고요
2020/02/14 - [놀고있네/HTML & CSS] - [CSS] Float 란?
miaow-miaow.tistory.com
Float를 요약하자면,
Float는 content(콘텐츠의) layout(레이아웃) 배치하는 데 필요한 속성이고, 요소들의 수평(horizontal), 수직(vertical) 흐름을 설정할 수 있어요.
Float를 box model이라고 부르지 않는 것 처럼
Flexbox 를 box model 이라고 부르지는 않아요!
box model는 요소를 둘러싸는 테두리, 면적과 같은 space에 대해서 다룬다면,
Flexbox는 box model의 화면 내 레이아웃을 설정하는 속성 들을 말합니다!
그럼 이만!