flexbox 공부허자
학원에서는 백엔드 중심이었기 때문에 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의 정렬 방법을 설정
Author And Source
이 문제에 관하여(flexbox 공부허자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wnwlals13/flexbox-공부허자-m2hm5tvq저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)