본문 바로가기
Development/css & scss

css flex 사용법 총정리

by Yeony99 2022. 5. 23.
728x90

Flexbox

Flexbox

Flexbox는 뷰포트나 요소의 크기가 명확하지 않고, 지속적으로 변하더라도 자동적으로 요소를 배치, 정렬할 수 있도록 하는 CSS3의 레이아웃 방식이다.

box

  • HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="flexbox.css">
    <title>Document</title>
</head>
<body>
    <h1>Flexbox</h1>
    <section id="container">
        <div style="background-color: #a2d2ff;"></div>
        <div style="background-color: #bde0fe;"></div>
        <div style="background-color: #ffafcc;"></div>
        <div style="background-color: #ffc8dd;"></div>
        <div style="background-color: #cdb4db;"></div>

    </section>
</body>
</html>
  • CSS
body {
    font-family: 'Segoe UI';
}

h1 {
    text-align: center;
}

#container {
    background-color: black;
    width: 90%;
    height: 500px;
    margin: 0 auto; /*center*/
    border: 5px solid black;
}

#box div {
    width: 100px;
    height: 100px;
}

flex 상태를 만드는 것은 간단하다.
다른 요소를 포함하는 부모 요소(#container)에 display : flex; 효과를 주면,

display:flex


이처럼 모든 div 요소가 가로로 정렬된다.
#container는 부모요소, #container div 는 flex-item 요소가 된다.

 

728x90

flex-container attribute

  • flex-direction
  • justify-content
  • flex-wrap
  • align-items
  • align-content
    위 5가지가 container, 즉 부모에 적용할 수 있는 속성이다.

flex-direction

flex-direction은 말 그대로 flex의 방향을 설정할 수 있다.

  • flex-direction : row;
    • 위에는 이미 row(행)으로 정렬되어 있기 때문에 row는 변화가 없다.
  • flex-direction : column;
    flex-direction:column
  • flex-direction : column-reverse;
    flex-direction:column-reverse
  • flex-direction: row-reverse;
    flex-direction:row-reverse

justify-content

부모 안에 있는 자식 요소들에 대한 정렬을 설정할 수 있다.

  • justify-content: center;
    justify-content: center
  • justify-content : flex-start;
    justify-content : flex-start
  • justify-content: flex-end;
    justify-content: flex-end
  • justify-content: space-around;
    • 자식 요소 하나하나에 일정한 공백을 둔다. 요소(공백)(공백)요소와 같다.
      justify-content: space-around
  • justify-content : space-between
    • 자식 요소가 부모 container를 가득 채우도록 공백이 생긴다.
      justify-content : space-between
  • justufy-content : space-evenly
    • 자식 요소의 좌우 공백을 같게 설정한다.
      justufy-content : space-evenly

flex-wrap

wrap은 wrapping하는 설정이다. 부모 크기보다 자식이 더 클 때, 다음 단락에 이어서 나열해주는 속성이다.
wrap 설정을 적용할 만큼 div의 크기가 크지 않아 css 속성을 바꾸었다.

#container {
    background-color: black;
    width: 90%;
    height: 500px;
    margin: 0 auto; /*center*/
    border: 5px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

#container div {
    width: 200px;
    height: 200px;
}

위와 같이 flex-direction을 수직정렬하고 width와 height를 늘리면, flex-item(div)의 높이가 200px이 유지되지 못하고 직사각형이 된 것을 확인할 수 있다.

  • flex-wrap : nowrap;
    -wrapping하지 않은 상태. flex-item의 크기가 flex-container보다 커져도 줄바꿈하지 않고, 일렬로 배치한다.
  • flex-wrap : wrap;
    • flex-item의 본래 속성이 flex-container를 벗어났을 때 줄바꿈하는 속성이다.
    • white-space 속성과 유사하다.
      (참고를 위해 div요소에 번호를 주었다.)
      flex-wrap : wrap
  • flex-wrap : wrap-reverse;
    flex-wrap : wrap-reverse

예시로는 flex-direction:column으로 설정해놓았기 때문에 요소가 세로 -> 가로로 넘어간다.
width를 줄이고 flex-direction:row로 설정한 후, flex-wrap:wrap 설정을 주면

가로

이렇게 123 // 45 로 정렬되는 것을 볼 수 있다.

align-items

container 속 자식 요소들을 정렬하는 속성이다.

#container {
    background-color: black;
    width: 90%;
    height: 500px;
    margin: 0 auto; /*center*/
    border: 5px solid black;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
  • align-items : center;
    align-items : center
  • align-items : baseline;
    align-items : baseline
  • align-items: flex-end;
    • 만약 wrap 속성을 같이 주게 된다면, 그것에 따라서 flex-end 와 flex-start 속성이 바뀔 수 있다.
      align-items: flex-end

align-content

flex-wrap : wrap 속성일 경우, flex-item은 다음 줄로 넘어간다. 이때 여러 줄이 된 item들을 정렬하는 속성이다.
기본값을 stretch로, 높이를 채운다.
CSS를 다시 설정했다.

#container {
    background-color: black;
    width: 90%;
    height: 500px;
    margin: 0 auto; /*center*/
    border: 5px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
}
  • align-content : center;
    • 모든 content들이 container의 가운데에 모인다.
      align-content:center
  • align-content: space-between;
    • justify의 between 속성처럼, container를 꽉 채우도록 공백이 생긴다.
      align-content: space-between
  • align-content : space-around;
    align-content : space-around

+)
align-self 속성을 div 에 줄 수 있다.

#container {
    background-color: black;
    width: 90%;
    height: 500px;
    margin: 0 auto; /*center*/
    border: 5px solid black;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

#container div {
    text-align: center;
    font-size: 35px;
    width: 200px;
    height: 200px;
}

div:nth-of-type(2n) {
    align-self: flex-start;
}

div:nth-of-type(2n-1) {
    align-self: flex-end;
}

위와 같이 작성하면 이런 결과가 나온다.

align-self

flex-item attribute

flex-item에 적용할 수 있는 속성들이다.

  • flex-basis
  • flex-grow
  • flex-shrink
  • flex

flex-basis

먼저 CSS 설정을 바꾼다. height에 준 크기를 주석처리하면, 좀더 인터랙티브하게 각 요소가 화면에 맞게 조정된다.

#container {
    background-color: black;
    width: 90%;
    /* height: 500px; */
    margin: 0 auto; /*center*/
    border: 5px solid black;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

#container div {
    text-align: center;
    font-size: 35px;
    width: 100px;
    height: 100px;
}
  • flex-basis
    • flex-item의 기본 크기를 결정하는 속성이다. 기본값은 auto.
    • width, height의 크기를 설정하는 모든 단위를 사용할 수 있다(px, %, em, rem ...)
    • flex-direction이 column인지, row인지에 따라 늘어나는(줄어드는) 방향이 결정된다(column : 세로 / row : 가로)
    • flex-basis:0은 absolute flex item이다. flex-container를 기준으로 item의 크기가 결정된다.
    • 단, flex-basis속성을 0으로 선언할 경우에는 flex-basis:0px 혹은 flex-basis:0%와 같이 단위를 명시해야 한다.

flex-basis: 200px;는 flex-item의 기본 크기를 300px로 설정하겠다는 의미이다.
따라서 div의 크기가 늘어난다.

flex-basis

  • flex-grow
    • flex-item의 확장을 결정한다. 0 혹은 양의 정수를 값에 할당하여 사용한다.
    • flex-grow:0이면 container의 크기가 커지더라도 item의 크기는 고정된다.
    • flex-grow:1(혹은 1이상의 양의 정수)이면 container의 크기가 커질 때 item 또한 container에 꽉 맞도록 크기가 맞춰진다.

flex-grow:1

  • flex-shrink
    • flex-item의 축소를 결정한다. 0 혹은 양의 정수를 값에 할당하여 사용한다.
    • 기본값은 1이다.
    • flex-shrink:0이면 container의 크기가 item 크기보다 작아져도 item의 크기는 원래 크기로 고정된다.
    • flex-shrink:1(혹은 1이상의 양의정수)이면 container의 크기가 작아져도 container의 크기에 맞춰 줄어든다

flex-basis 속성을 주지 않고, flex-grow와 flex-shrink를 적용하였다.

flexbox

  • flex
    • 위에 살펴본 flex-basis, flex-grow, flex-shrink를 축약해 표현할 수 있는 속성이다.
    • flex : 1, 1, 0과 같은 형식으로 작성한다.
    • 순서대로 grow, shrink, basis 형식이다.
728x90

'Development > css & scss' 카테고리의 다른 글

[scss] 파일명에 _ (언더바) 붙이는 이유  (0) 2022.06.28
Media Query 미디어 쿼리 사용  (0) 2022.06.03
scss 기본 문법 정리, css와의 차이점  (0) 2022.05.22

관련글

댓글

티스토리툴바