🧚🏻‍♂️ HTML , CSS

flexbox에 대하여

ji-hyun 2020. 5. 15. 22:33

flexbox란?

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.

 

 

 

 

flexbox의 구성

flexbox는 복수의 자식들 요소인 item과 그 상위 부모 요소인 container로 구성된다.

 

flexbox를 만드는 방법은 간단하다. 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다.

container와 item은 부모 요소와 자식 요소를 한 세트로 사용하는 ul과 li를 생각하면 쉽게 이해할 수 있다.

 

item들의 주축의 방향은 container의 flex-direction 속성으로 결정한다. flex-direction 속성을 따로 지정하지 않으면 기본값인 row가 적용된다. 속성값 row는 주축의 방향을 왼쪽에서 오른쪽 방향으로 흐르게 한다. flex-direction 속성의 또 다른 속성값인 column은 주축의 방향을 위에서 아래 방향으로 흐르게 한다.

 

 

<!DOCTYPE html>
<html>
    <head>
    <title>flexbox에 대하여 알아보기</title>
</head>

<style>
.container{
    display:flex;
    /* flex-direction: row;   굳이 선언 안해도 display: flex; 의 기본 값 */
    background-color: gray;
    height: 300px;
}
.item{
    border: 1px solid black;
    background-color: red;
}
.item:nth-child(odd){
    background-color: green;
}
.mumin{
 	width: 100px;
    height: auto;
}
</style>

<body>
<div class="container">
<div class="item">안녕하세요
    <br><span>11111</span>
    <img src="./mumin1.gif" class="mumin" />
</div>
<div class="item">flexbox에 대해서 배워볼 겁니다
    <br><span>22222</span>
    <img src="./mumin1.gif" class="mumin" />
</div>
<div class="item">한번 연습해보세요
    <br><span>33333</span>
    <img src="./mumin1.gif" class="mumin" />
</div>
</div>

</body>
</html>

 

 

display: flex 를 선언하면 flex-direction 의 default 값은 row이다.

 

 

 

부모 요소와 자식 요소에 정의하는 속성 구분

전체적인 정렬이나 흐름에 관련된 속성은 container에 정의하고, 자식 요소의 크기나 순서에 관련된 속성은 item에 정의한다. 이를 분리해 적용하는 것이 중요하다.

 

  • container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
  • item 속성: flex, flex-grow, flex-shrink, flex-basis, order

 

 

 

 

<부모 요소인 container에 대한 속성>

flex-wrap

  • flex-wrap: wrap     화면의 크기를 줄일 때 자식들 간에 떨어져서 이동
  • flex-wrap: no-wrap     화면의 크기를 줄일 때 자식들 이동 x (디폴트 값)

 

display: wrap; 속성을 적용하고 화면을 줄이면 이렇게 배치가 유동적으로 바뀐다.

 

 

 

 

 

 

+ ) 

flex-direction 속성과 flex-wrap 속성을 한번에 합쳐서 쓸 수 있는 속성은 "flex-flow 속성" 이다.

예를 들어, flex-direction : column 을 지정하고 flex-wrap : no-wrap 속성을 지정하고 싶다면 flex-flow : column no-wrap <- 이렇게 지정하면 된다. 

 

 

 

 

 

 

justify-content

justify를 가로로 꽂은 오뎅 꼬치라고 생각하면 쉽다. content들은 오뎅이며, justify는 이들을 끼운 오뎅꼬치이다.

'이들을 어디에 꽂을까?'라고 생각하면 되는데, 가령 꼬치 끝 부분에 모아서 꽂거나 이들끼리 간격을 두어서 꽂는 등 여러가지 방법이 있을 수 있다.

 

  • justify-content: flex-start      시작부분(왼쪽 축)을 기점으로 정렬한다. (기본값)
  • justify-content: center         중간부분을 기점으로 정렬한다.
  • justify-content: flex-end       끝부분(오른쪽 축)을 기점으로 정렬한다.
  • justify-content: space-between         양 옆 content들이 여백 없이 딱 붙고 between 사이에 space(여백)을 똑같이 나눠 갖는다
  • justify-content: space-around           얖 옆 content들이 여백 있고 나머지는 위와 같다.

 

justify-content: space-between을 적용해본 결과

 

 

 

 

 

 

align-items

justify가 가로로 오뎅꼬치인 수평정렬이었다면, align은 위아래로 움직이는 수직정렬이라고 보면 된다. default 값은 strecth이다.

 

  • align-items: strech              기본값이며, display만큼 길게 뻗어있음
  • align-items: flex-start          content들이 수평으로 위쪽으로 이동(이때 stretch 만큼 뻗어있지 않음)
  • align-items: center              수평으로 중간쪽으로 이동
  • align-items: flex-end           수평으로 아래쪽으로 이동

 

align-items: flex-start 을 적용해본 결과

 

 

 

 

 

 

 

 

align-content

flex-wrap: wrap과 같이 이용하는 속성이다. wrap 속성은 화면 크기를 줄일 때 content들이 이동하는 속성이다. justify-content 속성과 비슷한데 수직으로 정렬된다는 차이점이 존재하고, 속성값은 동일하게 사용이 가능하다.

 

  • align-content: flex-start              위로 쫙 붙음
  • align-content: flex-end               밑으로 쫙 붙음
  • align-content: center                  중간으로 이동
  • align-content: space-between      똑같이 여백을 나누어 갖음 (justify-content 와 비슷하나, 수직으로 여백을 나눠 가지는 차이점)
  • align-content: space-around        

 

flex-wrap: wrap 과 align-content: flex-end 를 같이 적용해본 결과

 

 

 

 

 

 

 

 

 

<자식 요소인 item에 대한 속성>

flex-grow 

flex-grow 속성은 item의 확장에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다.

속성값 0이 기본값

속성값이 0이면 container의 크기가 커져도 item의 크기가 커지지 않고 원래 크기로 유지된다.

container의 크기가 커질 때 item의 크기도 커지게 하려면 1 이상의 값을 속성값으로 설정한다. 만약 여러 아이템들 중 어떤 아이템의 속성값이 2 라면.... container를 채우면서 속성을 지정한 item만 (다른 아이템보다) 크기가 2배로 커진다.

 

.item:nth-child(1){

              flex-grow: 1;     }

.item:nth-child(2){

              flex-grow: 2;     }

.item:nth-child(3){

              flex-grow: 4;     }

 

이렇게 하면 item 들이 1:2:4 의 비율로 늘어났다가 줄어들었다가 할 수가 있다.

 

 

 

그러나 화면을 작게 했을 때, 비율이 1:2:4 가 되지 않는 것을 확인할 수 있는데

그 이유는 display의 여백 공간을 1:2:4 로 나눠갖는 것이기 때문이다.

item의 크기 비율을 정확히 지정하고 싶다면

item 클래스에 flex-basis: 0 이라는 속성을 주면 각 content들이 1:2:4의 비율을 가질 수 있다.

flex-basis의 기본값은 auto 이고, 이는 위의 사진에서 이미 적용된 모습이었다.

 

 

혹은 간단하게 각 아이템들에게 flex-basis : 10%, flex-basis : 20%, flex-basis : 40% 를 지정하면 어떤 상황에서도 비율을 정확하게 1:2:4 의 비율로 유지하게 된다.

 

 

 

 

 

 

 

flex-shrink 

flex-shrink 속성은 flex-grow 의 반대인 item의 축소에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다.

이것도 속성값 0이 기본값

container의 크기가 작아지면 item의 크기도 어떻게 작아질지 설정하는 속성인데, 만약 2 속성값을 쓰게 되면 container 가 줄어들때 item 의 크기는 2배로 줄어들게 된다. (1/2 배) 

 

 

 

 

 

 

 

 

align-self

.item:nth-child(1){
    align-self: flex-start;
}
.item:nth-child(2){
    align-self:center;
}
.item:nth-child(3){
    align-self: flex-end;
}

 

각 아이템들의 위치를 조정할 수 있는 속성

이렇게 align-self 를 flex-start, center, flex-end로 설정하면 item들이 알아서 정렬된다.

 

위 코드를 실행해본 결과

 

 

 

 

order

1번 item에 order: 1;

2번 item에 order: 2;

3번 item에 order: 3;   

 

로 설정하면 순서가 바뀐다. 물론 html이 바뀌는 것이 아니다. 단지 보여주는 것이 달라질 뿐이다.

 

 

    

 

 

 

 

 

'🧚🏻‍♂️ HTML , CSS' 카테고리의 다른 글

CSS - 반응 선택자, 상태 선택자, 구조 선택자  (0) 2021.09.19
CSS - tag, id, class 선택자, 속성 선택자, 후손 및 자손 선택자 등  (0) 2021.09.19
HTML 비디오 태그, 폼 태그, 시멘틱 태그  (0) 2021.09.17
HTML 기본 태그  (0) 2021.09.17
display: inline-block;  (1) 2020.04.27

'🧚🏻‍♂️ HTML , CSS'의 다른글

  • 현재글flexbox에 대하여

관련글

댓글

티스토리툴바