본문 바로가기
Web/CSS

[CSS] flex

by print_soo 2023. 5. 10.

1. flex

flex를 사용하기 위해서는 아래의 두 단계 코드가 있어야한다. container와 item이라는 태그가 있는 것이 아니고 해당 역할을 하는 부모, 자식 태그가 있어야한다는 의미이다.

<container>
	<item></item>
    	<item></item>
</container>

 

container와 item에 부여해야하는 속성

  container item
속성 display order
flex-direction flex-grow
flex-wrap flex-shrink
flex-flow flex-basis
justify-content flex
align-items align-self
align-content  

 

 

display: flex;

  • flex를 사용하기 위해서는 바깥쪽에 있는 container에 display: flex;를 작성해주어야한다. 

 

 

flex-direction

  • flex-direction을 하지 않은 것과 flex-direction: row;와 같다.
  • reverse를 사용하면 결과의 순서가 반대로 된다.

 

flex-direction: row / flex-direction: column

 

 

flex-basis

  • flex-basis는 선택된 요소의 기본 성질이 정해진다.
  • flex-basis: 200px을 작성했다면 flex-direction가 row일때는 width가 기본 200px로 column일 때는 height가 기본 200px로 정해지게 된다.

flex-direction: row일 때 flex-basis: 200px / flex-direction: column일 때 flex-basis: 200px

 

 

flex-grow

  • flex-grow는 0보다 큰 값을 세팅하면 Flexible 박스로 변하면서 남은 여백을 메우는 속성이다.
  • 기본적인 값은 flex-grow:0; 이다.
  • nth-child() 선택자를 이용해서 해당 item의 비율을 지정할 수 있다.

flex-grow:1;
각각의 item의 flex-grow를 2,0,2,1,1로 설정한 이미지

.item:nth-child(1){
    flex-grow: 2;
}
.item:nth-child(2){
    flex-grow: 0;
}
.item:nth-child(3){
    flex-grow: 2;
}
.item:nth-child(4){
    flex-grow: 1;
}
.item:nth-child(5){
    flex-grow: 1;
}

 

 

flex-shrink

  • Flex Container에 공간이 부족해질 때 Flex Item의 axis 방향 크기가 얼마나 줄어들 수 있는지 지정하는 값이다.
  • 기본 값은 flex-shrink: 1;이다.
  • 만약에 1번이 flex-shrink: 1;이고 2번이 flex-shrink: 2; 라면 1번은 3분의1 만큼 공간 분배를 해주고 2번은 3분의 2만큼 고통 분래를 해준다.

 

1번: flex-shrink: 1 / 2번: flex-shrink: 0
1번: flex-shrink: 1 / 2번: flex-shrink: 2

 

 

align-itmes

  • 해당 속성은 플렉스 요소의 수직방향 정렬 방식을 설정한다.
  • stretch: 기본 설정으로, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치된다. 
  • flex-start: 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치된다. 
  • flex-end: 플렉스 요소는 플렉스 컨테이너 아래쪽에 배치된다.
  • center: 플렉스 요소는 플렉스 컨테이너 가운데에 배치된다
  • baseline: 플렉스 요소는 플렉스 컨테이너 기준선에 배치된다

 

 

 

justify-content

  • 해당 속성은 플렉스 요소의 수평방향 정렬 방식을 설정한다.
  • flex-start : 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치된다. 
  • flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치된다. 
  • center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치된다. 
  • space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치된다. 
  • space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치된다. 

 

 

 

align-content

  • align-content 속성은 flex-wrap 속성의 동작을 변경할 수 있다.
  • 이 속성은 align-items 속성과 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬한다.
  • stretch : 기본 설정으로, 플렉스 라인의 높이가 남는 공간을 전부 차지하게 된다.
  • flex-start : 플렉스 라인은 플렉스 컨테이너의 앞쪽에 뭉치게 된다.
  • flex-end : 플렉스 라인은 플렉스 컨테이너의 뒤쪽에 뭉치게 된다.
  • center : 플렉스 라인은 플렉스 컨테이너의 가운데에 뭉치게 된다.
  • space-between : 플렉스 라인은 플렉스 컨테이너에 고르게 분포된다.
  • space-around : 플렉스 라인은 플렉스 컨테이너에 고르게 분포된다. 단, 양쪽 끝에 약간의 공간을 남겨둔다.

 

 

flex-wrap

  • 해당 속성은 플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지를 설정한다.
  • nowrap : 기본 설정으로, 플렉스 요소가 다음 줄로 넘어가지 않는다. 대신에 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치시킨다.
  • wrap : 플렉스 요소가 여유 공간이 없으면 다음줄로 넘어가서 배치된다.
  • wrap-reverse :  플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다. 단, 아래쪽이 아닌 위쪽으로 넘어간다.

 

 

align-self

  • align-items로 지정되어 있는 상황에서 어느 특정한 것에 값을 주고 싶을 때 사용한다. 

 

 

flex(item)

  • flex: flex-grow [flex-shrink] [flex-basis]
  • 해당 속성은 flex-grow, flex-shrink와 flex-basis를 축약적으로 사용한 코드이다. 

 

 

order

  • 해당 속성은 플렉스 컨테이너 안에 있는 플렉스 요소들의 순서를 설정한다. 

 

 

holy grail layout

  • holy grail layout이 header, nav main, ad, footer로 구성된 레이아웃을 의미한다.

그럼 이제 flex를 이용해서 holy grail layout을 만들어보자.

 

<!DOCTYPE html>
<html>

<head>
<title>Document</title>
<style>
    .container{
        display: flex; 
        /* 해당 코드만 작성해도 모든 텍스트가 가로로 정렬된다. 그 이유는 flex-direction: row가 기본 값이기 때문이다.*/
        flex-direction: column;
    }
    header{
        border-bottom: 1px solid gray; /* 헤더 아래에 구분선 생성 */
        padding-left: 20px; /* 로고 부분에 패딩 값을 주어 왼쪽과 띄워준다. */
    }
    footer{
        border-top: 1px solid gray; /* 푸터 위에 구분선 생성 */
        padding-left: 20px;
        text-align: center;
    }
    .content{
        display: flex; 
        /* 해당 코드만 작성해도 모든 텍스트가 가로로 정렬된다. 그 이유는 flex-direction: row가 기본 값이기 때문이다.*/
    }

    .content nav{
        border-right: 1px solid gray; /* 네비 오른쪽에 구분선 생성 */
    }

    .content aside{
        border-left: 1px solid gray; /* 광고 왼쪽에 구분선 생성 */
    }

    nav, aside{
        flex-basis: 150px;
        flex-shrink: 0; /* 브라우저창의 크기가 줄어들어도 nav와 aside 부분은 줄어들지 않는다. */
    }


</style>
</head>

<body>
    <div class="container">
        <header>
            <h1>제목</h1>
        </header>
        <section class="content">
            <nav>
                <ul>
                    <li>목록1</li>
                    <li>목록2</li>
                    <li>목록3</li>
                </ul>
            </nav>
            <main>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae vitae nam, similique magni cupiditate temporibus fuga dicta aspernatur maxime natus recusandae, repellat officiis ut voluptatum soluta, consequuntur odio autem voluptatibus.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae vitae nam, similique magni cupiditate temporibus fuga dicta aspernatur maxime natus recusandae, repellat officiis ut voluptatum soluta, consequuntur odio autem voluptatibus.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae vitae nam, similique magni cupiditate temporibus fuga dicta aspernatur maxime natus recusandae, repellat officiis ut voluptatum soluta, consequuntur odio autem voluptatibus.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae vitae nam, similique magni cupiditate temporibus fuga dicta aspernatur maxime natus recusandae, repellat officiis ut voluptatum soluta, consequuntur odio autem voluptatibus.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae vitae nam, similique magni cupiditate temporibus fuga dicta aspernatur maxime natus recusandae, repellat officiis ut voluptatum soluta, consequuntur odio autem voluptatibus.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae vitae nam, similique magni cupiditate temporibus fuga dicta aspernatur maxime natus recusandae, repellat officiis ut voluptatum soluta, consequuntur odio autem voluptatibus.
            </main>
            <aside>
                광고
            </aside>
        </section>
        <footer>
            <a href="#">홈페이지 주소</a>
        </footer>
    </div>
</body>

</html>

결과물

 

 

저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[CSS] media query  (0) 2023.05.11
[CSS] Multi column  (0) 2023.05.11
[CSS] position  (2) 2023.05.09
[CSS] margin 겹침  (0) 2023.05.09
[CSS] box-sizing  (0) 2023.05.08

관련글

티스토리툴바