[CSS] Flex-box 1.

김택수·2022년 3월 26일
0

CSS

목록 보기
1/2

✅ block vs inline


CSS를 이용해 Box를 만들면 기본적으로 display: block이 된다. block속성의 특징은 옆으로 무언가가 올 수 없기 때문에 한줄을 다 사용하게 된다. 그에 반해, inline속성은 옆에 무언가를 둘 수 있지만, Box처럼 width나 height을 사용할 수 없다.

✅ Box를 inline처럼 두고 싶을때?


Box를 수평으로 두고 싶을 때는 display: inline-block을 사용해주면 된다. 말 그대로 block속성을 가진 box를 inline하게 정렬할 수 있다.
만약 box에 display를 inline으로 주면 오류를 내는데, 그 이유는 Box에 이미 width와 height속성이 부여되어있기 때문이다.

✅ flexbox 규칙


1. 자식요소에 부여하지 않고 Container에 부여한다.

여러개의 박스를 감싸는 Container에 display: flex를 해주어야 flex로 레이아웃을 만들 수 있다.

✅ 행과 열, 그리고 방향


Flex-box에서는 특히 방향이 중요하다. Row는 행으로 가로줄을 말하고, Column은 열로 세로줄을 말한다.
또한, Flex-box의 기본방향(main-axis)는 Row방향(수평축)을 중심으로 하고, cross axis는 Column방향(수직축)을 중심으로 한다.
만약 임의로 direction: column을 해준다면, main-axis는 Column방향이 되고, cross axis는 Row방향이 된다. (서로 바뀜)

✅ 정렬로 알아보는 방향

✅ justify-content

: main-axis를 중심으로 자식요소들의 위치를 변경할 수 있다.


1. center

: 모든 자식요소가 가운데로 정렬된다.

2. space-between

: 자식요소들이 같은 여백을 가지고 떨어진다.

3. space-around

: 자식요소의 좌우여백을 같게 한다.

✅ align-items

: cross-axis를 중심으로 자식요소들의 위치를 변경할 수 있다.


1. flex-start

: align-items의 기본설정값.

2. flex-end

: cross-axis의 끝에 자식요소를 둔다.

3. strech

: 부모요소의 크기만큼 자식요소를 늘린다.

✅ 자식요소에만 줄 수 있는 속성


✅ align-self

: align-items와 동일하게 작동하지만 자식요소들을 하나씩 움직이고 싶을때 자식요소에 속성을 부여하여 사용.

profile
개발자 키우기 Lv1

0개의 댓글