안녕하세요 냥장판 입니다
지난 게시글에서는 Flexbox에 대한 대략적인 개념에 대해서 설명했어요.
2020/02/24 - [놀고있네/HTML & CSS] - [CSS] Flexbox - 기본개념
[CSS] Flexbox - 기본개념
안녕하세요 냥장판 입니다 이번 게시글에서는 CSS Flexbox 라는 개념에 대해서 알아볼 거에요. 1. Flexbox Flexbox는 Flexible Box Layout을 말해요 Flexbox란 정렬, 방향, 순서, 사이즈 등 사용자 인터페이스 디..
miaow-miaow.tistory.com
이번 게시글에서는 좀 더 세분화해서 flexbox에 대해 접근해 보고자 합니다.
1. Flex container
Flexbox 에는
Flex container와 Flex item이라는 개념이 존재해요.
Flex container는 여러개의 Flex item을 모아놓은 것입니다.
flex container를 생성하려면 영역 내의 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정합니다.
2. Flex 사용하기(Display: Flex)
HTML에서 DIV 태그는 block level 이에요!
box model에서 block과 inline 개념이 궁금하면 아래 게시글을 참고하세요
2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - Block, Inline 개념 이해하기
[CSS] Box Model - Block, Inline 개념 이해하기
안녕하세요 냥장판 입니다 이번 게시글에서는 CSS에서 가장 많이 사용되는 레이아웃 개념인 Box Model 에 대해 알아보기 전에! Display의 기본 개념인 Block, Inline에 대해서 알아볼게요 Display의 기본 개념 - B..
miaow-miaow.tistory.com
Flex를 사용하지 않고, flex container 안에 block 특성을 가지는 box model을 사용했을 때!
HTML 소스
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title>Flex 😎</title>
<link rel='stylesheet' href='styles_flexbox.css'/>
</head>
<body>
<div class="flexcontainer">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
|
cs |
결과는
box model은 예상대로 flex container에서 각각 한 block씩을 차지하게되요
그럼 Flex를 사용했을 때!
비교를 위해 같은 flexcontainer를 추가하고 display: flex 를 입력해서 flex로 적용했을 떄!
결과는
아래 처럼 flex container안에 block이 flex item으로 되서 보여지게 됩니다!
그럼 이만!
'🎪 놀고있네 > HTML & CSS' 카테고리의 다른 글
| [CSS] Flex item 그룹만들기 (0) | 2020.03.03 |
|---|---|
| [CSS] Flexbox - Aligning(justify-content 사용하기) (2) | 2020.03.02 |
| [CSS] Flexbox - 기본개념 (2) | 2020.02.24 |
| [CSS] Float 란? (4) | 2020.02.14 |
| [CSS] Box Sizing - content box, border box (4) | 2020.02.07 |
댓글