CSS Flex box 사용해보기

pixelstudio·2021년 3월 27일
0

CSS3

목록 보기
1/2
post-thumbnail

Flex는 Flexible Box또는 FlexBox라고 부르기도 한다. Flex는 레이아웃 배치 전용 기능으로 고안되었다. inline-block, float보다 편리하고 강력한 레이아웃을 디자인 할 수 있게 도와준다.

반드시 알아야하는 기본용어

주축(Main-axis): 컨테이너 안에 배치된 items의 수평방향의 축을 말한다. 이런 축의 시작과 끝을 main start와 main end라고 부른다.

교차축(cross-axis): Item이 내부에 배치되는 방향에 수직으로 이루는 축을 말한다. 축의 시작과 끝을 cross start와 cross end라고한다.

컨테이너: display: flex로 설정된 부모 요소를 flex container라고 한다.

아이템: 부모 요소가 flex container로 지정되어있으면 그안의 자식 요소들은 Flex item으로 불린다.

Flex-container(부모 요소)

.container {
   display: flex
}

flex container에 적용되는 속성

flex-dircection
flex-wrap
justify-content
align-items
align-content

배치 방향 설정

flex-direction: row(기본값) | row-reverse | column | column-reverse

줄넘김 처리(flex-wrap)

flex-wrap: nowrap(기본값) | wrap | wrap-reverse

기본적으로 display: flex같은 속성을 주게되면 모든 아이템들이 한줄로만 맞추려고 한다. 웹페이지의 구역이 줄어들게되면 아이템들이 넘쳐흘러 밖으로 나오게된다. 그래서 flex-wrap를 사용해 줄바꿈을 지정해 줄 수 있다.

코드펜 예제

nowrap(기본값): 줄바꿈을 하지 않지만 공간이 부족하면 넘쳐흐른다.

wrap: 줄바꿈 한다.

wrap-reverse: 아이템을 역순으로 줄바꿈을 한다.

flex-flow

flex-direction과 flex-wrap를 한꺼번에 지정할 수 있는 단축속성이다.

.flex-box {
	flex-flow: row wrap
    /* 속성의 첫번째 인자로 flex-dirction */
    /* 속성의 두번째 인자로 flex-wrap */
}

수평(메인)축 정렬(justify-content)

justify-content: flex-start(기본값), flex-end, center, space-between, space-around, space-evenly

메인축 방향으로 아이템들을 정렬하는 속성이다.(수평으로 정렬)

flex-start: flex-directionrow일때는 가장 왼쪽으로, column 일때는 가장 위를 기준으로 정렬한다.

flex-end: flex-directionrow일때는 가장 오른쪽으로, column 일때는 가장 아래를 기준으로 정렬한다.

center: 아이테을 가운데로 정렬한다.

space-between: 아이템들 사이로 균일한 간격으로 정렬한다.

space-around: 아이템들 둘레로 균일한 간격으로 정렬한다.

space-evenly: 두 항목의 간격이 같도록 정렬한다.

수직(교차)축 정렬(align-items)

align-items: stretch(기본값), flex-start, flex-end, center, baseline

justify-content와 비슷하지만 교차축을 기준으로정렬한다.(justify-content가 수평으로 정렬하면 align-items는 수직으로 정렬한다.)

flex-start: 교차축(세로)의 시작점으로 정렬한다.

flex-end: 교차축의 끝쪽으로 정렬한다.

center: 교차축의 중심으로 정렬한다.

stretch(기본값): 컨테이너를 체운다.(수직축 방향으로 전체를 채운다)

baseline: 아이템들을 텍스트 베이스라인 기준으로 정렬한다.

여러 행 정렬 (align-content)

flex-wrap

flex-start:

flex-end:

center:

stretch:

space-around:

space-between:

출처-CSS3 Flex 쉬운 가이드
출처-CSS3 tricks

profile
프론트엔드 개발자를 목표로 학습하며 스스로 디벨롭중입니다. 추후엔 백엔드를 제대로 학습할 예정입니다.

관심 있을 만한 포스트

0개의 댓글