flexbox 공부허자

JayJay·2021년 2월 9일

front

목록 보기

1/1

학원에서는 백엔드 중심이었기 때문에 flexbox에 대해 언급하지 않고 넘어갔다. 그래서 flexbox에 대해 잘 알지 못하고 padding, float을 남발해왔는데....
다른사람들 다 알았는데 나만 몰랐다. 하핳

이번에 제대로 정리해서 머리에 박아둬야지.. 엘리님의 유투브를 보며 정리해따 ^_^

👉 float 바2!

float은 사실 이미지와 텍스트를 배치하는 데 사용되는 속성이다. 그래서
float은 left, center, right로 설정할 수 있는데, 이는 텍스트들이 이미지를 감사면서 배치되도록 하는 방법이었다. 즉, float으로 레이아웃 정렬하는 것은 float의 순수목적에 어긋난다. 때문에 flexbox를 써야한다.

👉 flexbox

<section>
	<article></article>
    	<article></article>
        <article></article>
</section>

요로코롬 있다고 치자. 이 때 article 을 정렬하기 위해선 flexbox를 사용하면 된다.
즉, 아래처럼 flex를 선언한다.

section {
display : flex;
}

이 때, flexbox로 레이아웃 될 땐 2개의 축 main axis, cross axis 로 배치된다. main axis는 진행하고 있는 방향 축이고 cross axis는 이와 직각으로 된 방향축이다. 사실 아직도 좀 헷갈리지만 직접 뚱땅뚱땅 거리다 보면 어느정도 이해가 가기 시작한다 😛

container 속성 (section부분)

flex-direction : main axis 를 지정하는 속성
- row (기본), row-reverse, column, column-reverse
flex-wrap : 자식요소가 컨테이너를 벗어나면 다음 줄로 자연스레 접어지도록 하는 속성
- wrap (기본), nowrap
flex-flow : flex-direction, flex-wrap을 함께 쓸 수 있는 속성
- 사용 방법 : flex-flow : column nowrap;
justify-content : flex item 무리가 기본 축 상 어디에 놓이는지를 제어하는 속성
- flex-start, flex-end, center, space-around, space-between
align-items : flex item이 교차축 어디에 놓일 지를 제어하는 속성
- center, stretch, flex-start, flex-end

item 속성 (article부분)

order : flex item 들의 순서 정하기, 기본값 0
flex-grow : flex item 증가 너비 비율
flex-shrink : flex item 감소 너비 비율
flex-basis : flex item (공간 배분 전)기본 너비 비율
align-self : 교차 축에서 Item의 정렬 방법을 설정

JayJay