HTML, CSS/Function implementation

[Visual Studio Code] justify-content

zenghyun 2022. 11. 1. 23:34

CSS 속성 중에

justify-content를 사용해보자

 

 

 

Code 

<!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: 세로나열 조정
            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;
    }

    .container1 {justify-content: flex-start;}
    .container2 {justify-content: flex-end;}
    .container:3 {justify-content: center;}
    .container:4 {justify-content: space-between;}
    .container:5 {justify-content: space-evenly;}
    .container:6 {justify-content: space-around;}
    </style>
</head>
<body>
    <h1>justify-content:flex-start</h1>
    <div class="container container1">
        <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>justify-content:flex-end</h1>
    <div class="container container2">
        <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>justify-content:center</h1>
    <div class="container container3">
        <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>justify-content:space-between</h1>
    <div class="container container4">
        <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>justify-content:space-evenly</h1>
    <div class="container container5">
        <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>justify-content:space-around</h1>
    <div class="container container6">
        <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>

 

 

현재. container css에서

          justify-content: center; 와 align-items: center; 를 지정하여 item 박스가 가로,세로 중앙 배치된 상태이다.

 

justify-content: flex-start
 item 박스가 좌측 중앙에 붙어서 나온다.
justify-content: flex-end
 item 박스가 우측 중앙에 붙어서 나온다.
justify-content: center
 item 박스가 가로,세로 정중앙에 나온다.
justify-content: space-between
 item 사이 간격이 동일하게 나온다. (전체 가로길이 기준)
justify-content: space-evenly
 item마다 좌우의 간격이 같다.
justify-content: space-around
 item마다 좌우의 간격이 같고 evenly에 비해 안쪽 간격이 2배

 

 

 

 

결과 확인

 

http://justify-content1.netlify.app

 

Document

 

justify-content1.netlify.app