Flex

최현호·2022년 4월 4일

CSS

목록 보기

6/15

Flex

flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다.

display : flex

정렬 하고자 하는 요소를 감싸는 부모에게 display : flex 를 선언 합니다.
flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지
합니다.
선언 시, 보이지 않는 두 개의 축(Axis)이 생깁니다.

<div class="flexBox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.flexBox{
    display: flex;
}

메인축(Main Axis), 수직축 또는 교차축(Cross Axis)

4-flexbox-axes

Main axis : flex-direction 방향에 따라
Cross axis : main과 수직을 이루는 방향

flex-direction

자식들이 배치되는 축의 방향을 결정하는 속성

 .flexBox{
        display: flex;
        flex-direction: row;
	    /* flex-direction: column; */
	    /* flex-direction: row-reverse; */
	    /* flex-direction: column-reverse; */
}

row가 기본 속성 값 입니다.
flex-direction : row (왼->오) --> 왼쪽에서 오른쪽으로 가는 main axis 가 만들어집니다. 그리고, 그와 정확하게 수직을 이루는 cross axis가 나옵니다.(위->아래)
flex-direction : column (위->아래) --> 위에서부터 아래로 흐르는 main axis 가 만들어집니다.
그리고, 그와 정확하게 수직을 이루는 cross axis 가 나옵니다.(왼->오)
그외 row-reverse 와 column-reverse 도 마찬가지 입니다. (reverse 는 반대로 뒤집어서)

이미지 순서는 row , column, row-reverse, column-reverse 순서 입니다.
row-reverse는 이미지 상으로는 순서만 역순으로 보여지지만 실제로는 요소의 위치 또한 왼쪽기준 맨 오른쪽으로 달라 붙습니다.

justify-content

justify-content : 메인축 방향으로 자식을 정렬하는 속성

.flexBox {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

1624477909754-mODpe4NANa--image

flex-start (기본값) : 부모의 자식들을 시작점으로 정렬합니다.

flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위.
flex-end : 부모의 자식들을 끝 점으로 정렬합니다.

flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래.
center : 부모의 자식들을 가운데로 정렬합니다.
space-between : 부모의 자식들 사이(between) 에 균일한 간격을 만들어 줍니다.
space-around : 가운데 자식 기준 양 옆으로 균일한 간격을 만들어 줍니다.
space-evenly : 부모의 자식들 사이와 양 끝에 균일한 간격을 만들어 줍니다.

align-items

align-items : 수직축 방향으로 자식을 정렬하는 속성 (하나의 flex라인에 흐르는 cross axis을 기준)

.flexBox {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}