so woon!

[속성] flex 속성 본문

CSS/개념정리

[속성] flex 속성

xowoony 2022. 9. 16. 23:18

학습일 : 2022. 09. 16

flex 관련
display 속성 값이 'flex' 혹은 'inline-flex'인 부모(Flex 컨테이너)가 가지는 자식 요소들의 흐름을 쉽게 설정하기 위해 사용한다.

 

 


flex-direction 속성
Flex 컨테이너에 지정하는 속성이다.
이가 가지는 자식 요소들에 대한 흐름의 방향을 지정한다.
이때 자식 요소들의 display 값과 관계 없이 정렬한다.

속성 값 :

  - row : 행방향(가로방향) 정렬
  - row-reverse : 행방향(가로방향) 역정렬
  - column : 열방향(세로방향) 정렬
  - column-reverse : 열방향(세로방향) 역정렬

 

 

 

justify-content 속성
Flex 컨테이너에 지정하는 속성이다.
'flex-direction' 속성 값의 방향과 수평한 방향에 대한 정렬이다.

속성 값 :

     - flex-start(start) : 흐름의 방향에 대한 시작점 부터의 정렬.
     - flex-end(end) : 흐름의 방향에 대한 끝점 부터의 정렬.
     - center : 흐름의 방향에 대한 가운데 정렬
     - left : 흐름의 방향에 대한 화면상 왼쪽 정렬.
     - right : 흐름의 방향에 대한 화면상 오른쪽 정렬.
     - space-between : 자식 요소들 간 거리를 같은 비율로 나누어 정렬.
     - space-around : 자식 요소들 간 거리를 같은 비율인 x로, 양 끝 빈 공간에 대해 x/2로  나누어 정렬.

 

 

 

align-items 속성
Flex 컨테이너에 지정하는 속성이다.
'flex-direction' 속성 값의 방향과 수직한 방향에 대한 정렬이다.

속성 값 :

     - flex-start : 시작점 정렬. (flex-direction 속성 값이 row|row-reverse 일때 위쪽 정렬)
     - flex-end : 끝점 정렬. (flex-direction 속성 값이 row|row-reverse 일때 아래쪽 정렬)
     - center : 가운데 정렬.
     - stretch : 늘어뜨림.

 

 



align-content 속성
Flex 컨테이너에 지정하는 속성이다.
개행이 이루어지지 않은 Flex 컨테이너 혹은 'flex-wrap'이 'nowrap'인 경우 무시된다.
'align-items' 속성 같은 경우, 각 축에 대한 'flex-direction'과 수직한 방향으로의 정렬이나,
'align-content'는 전체 내용과 컨테이너간의 'flex-direction'과 수직한 방향으로의 정렬이다.

 

 

 


flex-wrap 속성
Flex 컨테이너에 지정하는 속성이다.
'justify-content' 방향으로 넘치는 자식 요소에 대해 'align-items' 방향으로 개행할 것인가에 대한 설정이다.

속성 값:

  - nowrap : 개행하지 않는다. (기본값)
  - wrap : 개행한다.

 

 

 



flex-basis 속성
Flex 컨테이너의 자식에게 부여하는 속성이다.
해당 요소의 기본 크기를 지정한다. 'flex-direction'과 수평한 방향의 크기를 지정하는데, 'row' 혹은 'row-reverse'일 때 'width'와 같고, 'column' 혹은 'column-reverse'일 때 'height'와 같다.

 

 

 


flex-grow 속성
Flex 컨테이너의 자식에게 부여하는 속성이다.
해당 요소가 'flex-direction'과 수평한 방향으로 (빈 공간을 차지하며)늘어나는 비율을 지정한다.
기본 값은 0이며 0일 때 늘어나지 않는다.

 

 


flex-shrink 속성
Flex 컨테이너의 자식에게 부여하는 속성이다.
해당 요소가 'flex-direction'과 수평한 방향으로 줄어드는 비율을 지정한다. 기본 값은 0이며 0일 때 줄어들지 않는다.

flex

- 'flex-grow', 'flex-shrink', 'flex-basis' 속성 값을 한번에 적을 때 사용한다.
- flex : [flex-grow 값] [flex-shrink 값]; /* 이 때 flex-basis 값은 auto가 된다. */
- flex : [flex-grow 값] [flex-shrink 값] [flex-basis 값];
- flex : [flex-grow와 flex-shrink값|flex-basis 값];
            /* 길이 단위 없이 숫자만 적으면 flex-grow와 flex-shrink 값이 되며, 이가 아니라면 flex-basis 값을 지정하게 된다. */
 - flex: 1; 은 flex-shirnk와 flex-grow 값을 1로 지정하는 것이 된다.
 - flex: 1rem; 은 flex-basis값을 1rem으로 지정하는 것이 된다.

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Flex 관련 속성</title>
    <style>
        body > .container {
            height: 25rem;
            align-content: center;
            align-items: flex-end;
            background-color: rgb(250, 150, 150);
            display: flex;
            flex-direction: row;❤
            flex-wrap: wrap;❤
            justify-content: center;
        }

        body > .container > .item {
            background-color: rgb(200, 100, 100);
            border: 0.125rem solid rgb(150, 50, 50);
            color: rgb(255, 255, 255);
            padding: 1rem;   
        }

        body > .container > .item.base {
            flex-basis: 7.5rem;❤❤
        }

        body > .container > .item.thick {
            height: 5rem;
        }

        /* body > .container > .item + .item {
            margin-top: 0.5rem;
        } */

        body {
            margin: 0;
        }

        body > .nav {
            align-items: center;
            background-color: rgb(220, 225, 230);
            display: flex;
            flex-direction: row;❤❤❤
            
            font-size: 0.8rem;
            justify-content: flex-start;
            padding: 0.5rem;
        }

        body > .nav > .spring {
            flex-grow: 1;❤❤❤❤
            flex-shrink: 1;❤❤❤❤
        }

        body > .nav > .link {
            color: rgb(60, 65, 70);
            text-decoration: none;
        }

        body > .nav > .link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <nav class="nav">❤❤❤
        <a class="link" href="#">즐겨찾기 추가</a>
        <div class="spring"></div>❤❤❤❤
        <a class="link" href="#">로그인</a>
        <a class="link" href="#">회원가입</a>
        <a class="link" href="#">고객센터</a>
    </nav>
    <div class="container">❤
        <div class="item base thick">참깨빵</div>❤❤
        <div class="item">순쇠고기 패티</div>
        <div class="item">순쇠고기 패티</div>
        <div class="item">양상추</div>
        <div class="item thick">치즈</div>
        <div class="item">피클</div>
        <div class="item">특별한 소스</div>
    </div>
</body>
</html>


==========실행결과=========







저작자표시 비영리 변경금지

'CSS > 개념정리' 카테고리의 다른 글

[기타] 미디어 쿼리  (0) 2022.09.17
[속성] grid 관련  (0) 2022.09.16
[태그] link 태그  (0) 2022.09.15
[속성] transition 속성  (0) 2022.09.10
[속성] transform 속성  (0) 2022.09.10
'CSS/개념정리' Related Articles more
Comments