Flexbox 제대로 사용하기

"나의 첫 HTML&CSS 웹 디자인" 이라는 책을 공부하며 정리한 글입니다.

Flexbox

Flexbox는 가로로 나열하고 싶을 때 쓴다.

(Flutter로는 Row나 Wrap 위젯)

Flexbox 사용법

1. 가로로 늘어놓고 싶은 요소의 부모 요소를 찾는다.

2. 부모 요소에 display:flex;를 지정한다.

기본축?

Flexbox는 가로로 나열한다.

그렇다면 Flexbox의 기본축은 가로일까 세로일까?

당연히 가로이다.

가로로 막대기를 요소들에 끼워넣고, 그 선을 따라 요소들이 움직이는 이미지를 떠올리자.

교차축은 세로이다.

세로로 막대기를 요소들에 각각 끼워넣고, 마찬가지로 움직이면 된다.

Flexbox를 만들면 자식요소의 크기는?

기본적으로 최소 크기로 바뀐다.

flex-basis: 920px; 자식요소에 이렇게 지정하면 요소의 크기를 정해줄 수 있다.