그럼에도 불구하고

👨‍💻

[Visual Studio Code] flex-direction 본문

HTML, CSS/Function implementation

[Visual Studio Code] flex-direction

zenghyun 2022. 11. 1. 23:47

 

 

CSS에서

flex-direction 기능을 사용해보자.

 

<!DOCTYPE html>
<html lang="ko">
<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">
    <title>Document</title>
    <link rel="stylesheet" href="../style/reset.css">
    <link rel="stylesheet" href="../style/box.css">
    <style>
        /*
            가로, 세로 나란히 배치
            가로 가운데, 세로 가운데 배치 

            container : flex레이아웃의 부모
                        width: 100%; height:100vh;
                        justify-content: 주축에 대한 정렬방식
                        align_items: 보조축(cross axis)의 정렬 
                        flex-direction: row : 주축을 변경 

            item : flex레이아웃의 자식
                % 부모너비에 비례
                margin 세로의 % 부모의 가로 %
         */
         .container {width:100%; height: 100vh;
        background-color: pink;
        display: flex;
        justify-content: center;
        /* space-between: item사이 간격을 동일하게 맞춤 */
        /* space-evenly:  item마다 좌우의 간격이 같음 */
        /* space-around: item마다 좌우의 간격이 같음 evenly에 비해 안쪽 간격이 2배*/
        /* center: 가로 가운데 배치 */
        align-items: center;
        /* align-items: center까지 같이하면 가로 세로 가운데 */
    }
    .item { width: 100px; height: 50px;
    background-color: skyblue;
    border:  1px solid blue;
    }

    .container:nth-of-type(1) {flex-direction: row;}
    .container:nth-of-type(2) {flex-direction: row-reverse;}
    .container:nth-of-type(3) {flex-direction: column;}
    .container:nth-of-type(4) {flex-direction:column-reverse; }
    .container:nth-of-type(5) {flex-direction:column; justify-content: flex-start; align-items: flex-start;}
    .container:nth-of-type(6) {flex-direction:column; justify-content: flex-end; align-items: flex-end;}
    
    </style>
</head>
<body>
    <h1>flex-direction: row</h1>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

    <h1>flex-direction: row-reverse</h1>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

    <h1>flex-direction: column</h1>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

    <h1>flex-direction:column-reverse</h1>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

    <h1>column 상태에서 justify-content:flex-start</h1>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

    <h1>column 상태에서 justify-content:flex-end</h1>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

  
</body>
</html>

 

 

 

 

flex-direction: row
 item 가로배치 / 1부터 5까지 순서대로 나옴
flex-direction: row-reverse
 item 가로배치 / 5부터 1까지 역순으로 나옴
flex-direction: column
 item 세로배치 / 1부터 5까지 순서대로 나옴
flex-direction:column-reverse
 
 item 세로배치 / 5부터 1까지 역순으로 나옴
flex-direction:column;
justify-content: flex-start; align-items: flex-start;
 item 세로배치 / 시작부분에 붙어서 나옴
flex-direction:column; justify-content: flex-end; align-items: flex-end;
  item 세로배치 / 끝부분에 붙어서 나옴

 

 

 

http://flex-direction.netlify.app

 

Document

 

flex-direction.netlify.app

 

'HTML, CSS > Function implementation' 카테고리의 다른 글

[Visual Studio Code] 여러가지 transition 사용해보기  (0) 2022.11.02
[Visual Studio Code] opacity / transition-duration 이용해보기  (0) 2022.11.02
[Visual Studio Code] justify-content  (0) 2022.11.01
[Visual Studio Code] scroll-behavior: smooth  (0) 2022.10.29
[Visual Studio Code] overflow 사용하기  (0) 2022.10.29
'HTML, CSS/Function implementation' Related Articles more
Comments