[CSS] Flexbox - 기본개념

 

 

 

안녕하세요 냥장판 입니다 

이번 게시글에서는 CSS Flexbox 라는 개념에 대해서 알아볼 거에요.

 

1. Flexbox

 

Flexbox는 Flexible Box Layout을 말해요

Flexbox란 정렬, 방향, 순서, 사이즈 등 사용자 인터페이스 디자인에 최적화된 Box model 라고 보시면 됩니다.

 

2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - 기본 요소

[CSS] Box Model - 기본 요소

각 box model 간에 유기적인 layout을 나타낼 수 있어요.

예를 들면 정렬, 방향, 사이즈 등을 flexbox로 나타낼 수 있어요

 

By 냥장판

By 냥장판

By 냥장판

 

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의 레이아웃 구조에 초점을 맞춰요.

Source: internetingishard

 

Float에 대한 게시글은 아래를 참고하시면 되고요

2020/02/14 - [놀고있네/HTML & CSS] - [CSS] Float 란?

[CSS] Float 란?

 

Float를 요약하자면,

Float는 content(콘텐츠의) layout(레이아웃) 배치하는 데 필요한 속성이고, 요소들의 수평(horizontal), 수직(vertical) 흐름을 설정할 수 있어요.

 

Floats - By 냥장판

 

Float를 box model이라고 부르지 않는 것 처럼

Flexbox 를 box model 이라고 부르지는 않아요!

box model는 요소를 둘러싸는 테두리, 면적과 같은 space에 대해서 다룬다면,

Flexbox는 box model의 화면 내 레이아웃을 설정하는 속성 들을 말합니다!

 

 

 

그럼 이만!