[CSS] flex-cotainer, item

flex

flex는 flexible box, flex box 라고 부르기도 합니다. 레이아웃 배치 전용으로 나온 속성이라 간편하게 레이아웃을 정렬할 수 있는 1차원적 레이아웃 모델입니다. flex 를 사용하기 위해서는 display 속성을 통해 flex 값을 주면 되는데 이는 자식을 배치하는 방식을 설정하는 것이며 자식들은 유연하게 빈 공간을 치우거나 컨테이너를 넘거아지 않도록 줄어듭니다. 또한 자식 간의 수평 및 수직 정렬 과 빈 공간의 크기를 쉽게 조작할 수 있습니다.

얼마나 쉬운지 한번 살펴볼까요?

아래는 float를 통해 왼쪽 정렬한 코드입니다. 왼쪽 정렬을 위해 float:left로 띄우고 부모가 높이값을 갖고 그 외에 다른 요소들도 흘러가지 않도록 clear을 통해 flaot을 해제 시켜주는 코드가 필요합니다.

*float 를 왜 해제 시켜줘야하는지 궁금하다면?

2023.03.11 - [dev/HTML CSS] - [CSS] float 사용 후 clear를 사용하는 이유는 뭘까

[CSS] float 사용 후 clear를 사용하는 이유는 뭘까

float float는 한 요소가 흐름에서 빠져나와 단어 그대로의 의미대로 떠있는 특징을 가지고 있다. 원래 float속성은 사진과 텍스트를 같이 배치하기 위해 쓰여졌지만 현재에는 웹페이지의 레이아웃

masankong.tistory.com

        .wrapper::after {
            content:'';
            display: block;
            clear: both;
        }

        .box {
            float: left;
        }

flex로 똑같은 결과를 주기 위해선 딱 한 줄의 코드만 있으면 됩니다.

.wrapper { display: flex }

flex를 사용하기 위해선 필수적으로 감싸는 container(부모) 요소와 정렬되는 items(자식)요소, 2개의 준비물이 필요하다. 그리고 각각 사용되는 속성이 다르다. 지금부터 각각의 속성들을 살펴보자

Container display, flex-flow, justify-content, align-item, align-content
items align-self, felx, order

flex-container 사용 속성

아래 이미지는 flex-containe의 이해하기 쉽게 표시한 이미지이다 해당 이미지를 비교하면서 아래 내용을 살펴보자

display

display는 속성값 flex로 Flex Container를 정의하는 속성입니다.

flex-direction 기본값: row

container 내의 item들을 배치할 때 사용할 주 축(main-axis) 및 방향(정방향, 역방향)을 지정합니다.

-reverse같 붙을 경우에는 주축의 반대 방향으로 표시한다. row-reverse(오 > 왼), column-reverse (아래 > 위)

flex-direction: row;
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;

✅ row, row-reverse 일 경우엔 main-axis(주축)가 수평, cross-axis(교차축)가 수직이 되고

반대로 column, clumn-reverse 일 경우엔 main-axis가 수직 cross-asix가 수평이 된다.

flex-wrap 기본값: nowrap

item들이 강제로 한줄에 배치되게 할 것인지, 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 쉽게 말해 줄바꿈을 결정합니다.

flex: nowrap;    /* 모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시) */
flex: wrap;     /* Items를 여러 줄로 묶음 */

flex-flow

이 속성은 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정합니다.

flex-flow: row-reverse wrap;

justify-content 기본값: flex-start

주축(main-axis) 을 기준으로 배열의 위치를 조절하거나 아이템 간의 정렬 방법을 설정합니다.

justify-content: start; /* Items를 시작점(flex-start)으로 정렬 */
justify-content: end; /* Items를 끝점(flex-end)으로 정렬 */
justify-content: center;  /* Items를 가운데 정렬 */
justify-content: space-between; /* 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨 */
justify-content: space-around; /* Items를 균등한 여백을 포함하여 정렬 */

align-content 기본값: stretch

justify-content 와 반대로 주축이 아닌 교차 축(cross-axis) 기준으로 배열의 위치를 조절하거나 아이템 간의 정렬 방법을 설정합니다.

보통 여러줄인 flex-wrap: wrap 상태에서 사용 합니다.

✅ stretch는 교차 축에 해당하는 너비(속성 width 혹은 height)가 값이 auto(기본값)일 경우 교차 축을 채우기 위해 자동으로 늘어납니다.

align-content: stretch; /* Container의 교차 축을 채우기 위해 Items를 늘림 */
align-content: flex-start; /* Items를 시작점(flex-start)으로 정렬 */
align-content: flex-end /* Items를 끝점(flex-end)으로 정렬 */
align-content: center; /* Items를 가운데 정렬 */
align-content: space-between; /* 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨 */
align-content: space-around; /* Items를 균등한 여백을 포함하여 정렬 */

align-items 기본값: stretch

Items가 한 줄일 경우 많이 사용합니다. ( Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성 사용)
align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.

align-items: stretch; /* Container의 교차 축을 채우기 위해 Items를 늘림 */
align-items: flex-start; /* Items를 시작점(flex-start)으로 정렬 */
align-items: flex-end /* Items를 끝점(flex-end)으로 정렬 */
align-items: center; /* Items를 가운데 정렬 */
align-items: baseline; /* Items를 문자 기준선에 정렬 */

flex-item에 사용하는 속성

order 기본값: 0

flex-item들의 순서를 결정하는 속성이다. 수가 더 작을수록 우선 배치 된다 (음수도 사용가능)

<style>
        .box:nth-child(1) { order: 5; }
        .box:nth-child(2) { order: 3; }
        .box:nth-child(3) { order: 1; }
        .box:nth-child(4) { order: 2; }
        .box:nth-child(5) { order: 4; }
</style
<body>
    <div class="wrapper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
    </div>
</body>

flex-grow 기본값: 0

item이 container 내부에서 할당할 수 있는 공간의 정도를 지정 하며 container가 넓어질 경우 Item의 증가 너비 비율을 설정하는 속성이다. 숫자가 크면 더 많은 너비를 가진다.
✅ Item이 가변 너비가 아니거나, 값이 flex-grow:0일 경우 늘어나지 않습니다 (0은 기본값)

아래 코드를 예시로 늘어날때 남은 나눠가지는 비율은 grow를 준 1,2,3 초 6에서

box:nth-child(1) 은 6/1

box:nth-child(2) 은 6/2

box:nth-child(3) 은 6/3

만큼 나눠 가진다.

<style>
        .box:nth-child(1) { flex-grow:1; }
        .box:nth-child(2) { flex-grow:2; }
        .box:nth-child(3) { flex-grow:3; }
        .box:nth-child(4) { flex-grow:0; }
        .box:nth-child(5) { flex-grow:0; }
</style
<body>
    <div class="wrapper">
        <div class="box">flex-grow: 1;</div>
        <div class="box">flex-grow: 2;</div>
        <div class="box">flex-grow: 3;</div>
        <div class="box">flex-grow: 0;</div>
        <div class="box">flex-grow: 0;</div>
    </div>
</body>

flex-shrink 기본값: 1

flex-grow 와는 반대로 Item이 감소하는 너비의 비율을 설정하는 속성입니다. 숫자가 크면 더 많은 너비가 감소합니다.

✅ Item이 가변 너비가 아니거나, 값이 flex-shrink:0일 경우 줄어들지 않습니다 (0은 기본값)

<style>
        .box:nth-child(1) { flex-shrink:1; }
        .box:nth-child(2) { flex-shrink:2; }
        .box:nth-child(3) { flex-shrink:3; }
        .box:nth-child(4) { flex-shrink:0; }
        .box:nth-child(5) { flex-shrink:0; }
</style
<body>
    <div class="wrapper">
        <div class="box">flex-shrink: 1;</div>
        <div class="box">flex-shrink: 2;</div>
        <div class="box">flex-shrink: 3;</div>
        <div class="box">flex-shrink: 0;</div>
        <div class="box">flex-shrink: 0;</div>
    </div>
</body>

flex-basis 기본값: auto

flex-item의 초기 크기를 설정하는 속성입니다. width, height와 다른 점은 축의 방향에 따라 달라진다는 것과 내부 콘텐츠에 따라 유연한 크기를 가진다는 것입니다.

✅ flex-basisr값이 적용되어있다면 row일 경우 width 값이 무시, column일 경우 height 값이 무시됩니다.

<style>
		.box { width: 200px; height: 200px }
        .box:nth-child(1) { flex-basis: 100px;  }
        .box:nth-child(2) { flex-basis: 100px;  }
        .box:nth-child(3) { flex-basis: 100px;  }
        .box:nth-child(4) { flex-basis: 100px;  }
        .box:nth-child(5) { flex-basis: 100px;  }}
</style>
<body>
    <div class="wrapper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
    </div>
</body>

flex

flex-basis, flex-grow, flex-shrink 의 단축 속성이다. 순서는 Item의 너비(증가-grow, 감소-shrink, 기본-basis)이다.

.box {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}

align-self

전체 교차축(cross-axis)정렬을 설정했던 align-content, align-items 와 다르게 일부 Item만 정렬 방법을 변경하려고 할 경우 사용하는 속성이다. 적용방법은 align-content, align-items 와 유사하다.

align-self: auto; /* Container의 align-items 속성을 상속받음 */
align-self: stretch; /* Container의 교차 축을 채우기 위해 Item을 늘림 */
align-self: flex-start; /* Item을 각 줄의 시작점(flex-start)으로 정렬 */
align-self: flex-end; /* Item을 각 줄의 끝점(flex-end)으로 정렬 */
align-self: center; /* Item을 가운데 정렬 */
align-self: baseline;  /* Item을 문자 기준선에 정렬 */

아래는 flex를 재밌게 게임을 통해 공부할 수 있는 사이트이다.

https://flexboxfroggy.com/#ko

'dev > HTML CSS' 카테고리의 다른 글

[css] Negative Margins(음수 마진) (0)	2023.03.20
[html] img 사용 이유와 관련 속성 (2)	2023.03.19
[CSS] float 사용 후 clear를 사용하는 이유는 뭘까 (0)	2023.03.11
[CSS] overflow (0)	2023.03.09
[CSS]선택자 결합자, 가상(의사) 클래스, 가상(의사) 요소 (0)	2023.03.05

마산콩의 개발일기

[CSS] flex-cotainer, item

flex

flex-container 사용 속성

flex-item에 사용하는 속성

'dev > HTML CSS' 카테고리의 다른 글

댓글

티스토리툴바

[CSS] flex-cotainer, item

flex

flex-container 사용 속성

flex-item에 사용하는 속성

'dev > HTML CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바