티스토리 뷰

css

flexbox 정리

코딩하는 둥아 2021. 1. 6. 18:10
728x90

[container에 사용하는 속성들] 

display: flex

justify-content

: 중심축(row, column)에서의 위치를 조정해주는 속성

  • center
  • flex-start
  • flex-end
  • space-around : 모든 아이템들이 같은 간격으로 배치
  • space-between: 첫 아이템과 마지막 아이템의 

align-items

: 수직축을 중심으로 위치를 조정해주는 속성

  • flex-start
  • flex-end
  • center
  • baseline: 각 item들의 text가 같은 위치에 오도록 배치
  • stretch (default)

flex-direction

  • row: 요소들을 텍스트의 방향과 동일하게 정렬
  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬
  • column: 요소들을 위에서 아래로 정렬
  • column-reverse: 요소들을 아래에서 위로 정렬
    • column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서가 함께 뒤바뀌기 떄문에 justify-content로 맞춰줘야 함!

flex-wrap

  • nowrap (default) : 자리가 비좁아도 한 줄에 정렬하도록 함
  • wrap : 여러줄에 걸쳐서 정렬함
  • wrap-reverse : 요소들을 여러줄에 걸쳐 반대로 정렬함

flex-flow

: flex-direction과 flex-wrap을 한번에 설정할 수 있음

ex) flex-flow: column wrap;

 

align-content

: 여러 줄 사이의 간격을 지정할 수 있음

  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
  • center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
  • space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
  • space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
  • stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

 

[item]

order: integer를 인자로 받으며, 각 아이템들의 위치를 원하는 위치로 변경할 수 있음

align-self: 개별 요소에 적용할 수 있는 또 다른 속성, 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 아이템에만 적용됩니다.

  • align-self와 order를 함께 사용해서 원하는대로 위치를 조정하기도 함

flex-grow: 아이템들의 width보다 container의 크기가 클 때 각 아이템의 width가 어떻게 변할지를 결정함

flex-shrink: 아이템들의 width보다 container의 크기가 작을 때 각 아이템의 width가 어떻게 변할지를 결정함

  • flex-grow, flex-shrink는 컨텐츠를 제외한 여백을 일정 비율로 나누는 것이기 때문에, 2:1:1로 설정하더라도 실질적으로 2대1대1 비율이 아님
    • flex-grow로 비율을 설정하고 싶다면 flex-basis를 모두 0으로 설정해줘야함.
  • 그럴 때 flex-basis를 사용해서 50%:25%:25%로 설정하면 원하는 결과를 얻을 수 있음!

flex-basis: container의 width에 따라 퍼센트로 각 아이템이 차지하는 width를 설정할 수 있음

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            padding-top: 100px;
            background: beige;
            height: 100vh; /* 보이는 화면의 전체를 사용하곘다 */
            display: flex;
        }
        .item {
            width: 40px;
            height: 40px;
        }
        .item1{
            background: #ffcdd2;
            flex-grow: 2;
            flex-shrink: 2; /* 두 배로 더 많이 작게 만들겠다 */
        }
        .item2{
            background: #f8bbd0;
            flex-grow: 1;
            flex-shrink: 1;
        }
        .item3{
            background: #e1bee7;
            flex-grow: 1;
            flex-shrink: 1;
        }
    </style>
</head>

<body>
    <!-- div.container>div.item.item${$}*10 -->
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>

</body>
</html>

flex-grow
flex-shrink

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            background: beige;
            height: 100vh; /* 보이는 화면의 전체를 사용하곘다 */
            display: flex;
            flex-direction: row; /* default: row, 왼쪽에서 오른쪽 , 반대는 row-reverse 오른쪽에서 왼쪽 , column, column-reverse - 중심축이 수직으로*/
            flex-wrap: wrap; /* 기본값 nowrap: 가득 차도 다음줄로 안넘어감. */
            /* flex-flow: row nowrap; */
            justify-content: space-evenly; /* 중심축에서 아이템을 어떻게 배치할 지 */
            align-items: center;
            align-content: center;
            /* align-items: baseline; text가 같은 위치에 오도록 설정 */
        }
        .item {
            width: 40px;
            height: 40px;
        }
        .item1{
            background: #ffcdd2;
        }
        .item2{
            background: #f8bbd0;
        }
        .item3{
            background: #e1bee7;
        }
        .item4{
            background: #d1c4e9;
        }
        .item5{
            background: #c5cae9;
        }
        .item6{
            background: #c8e6c9;
        }
        .item7{
            background: #f0f4c3;
        }
        .item8{
            background: #fff9c4;
        }
        .item9{
            background: #ffecb3;
        }
        .item10{
            background: #ffccbc;
        }
    </style>
</head>

<body>
    <!-- div.container>div.item.item${$}*10 -->
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
    </div>

</body>
</html>

위 코드의 결과

 

728x90

'css' 카테고리의 다른 글

업무에 바로쓰는 html5 2일차  (0) 2023.12.05
업무에 바로쓰는 html5 1일차  (0) 2023.12.04
css - 한 쪽 모서리가 접힌 모양 만들기  (0) 2021.01.16
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함