본문 바로가기
CSS

flex를 이용한 정렬(justify-content, align-items, align-content)

탐훈 2023. 9. 2. 11:55
728x90

[목표]

: 기본적인 정렬 개념, 아이콘을 padding이 아닌 flex 속성을 이용하여 정중앙 정렬하기 

 

우선 justify와 align에 축에 대해서 배웠다. 

 

출처 - 1분코딩

 

시각화 하니 확실히 이해가 빠르다. 

 

실습 1) 헤더에 있는 버튼들 정렬해보기 (justify-content)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="default.css">
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">HOME</div>
        <div class="flex-item">ITEM</div>
        <div class="flex-item">CUSTOM</div>
    </div>
</body>
<style>
    .flex-container{
        display:flex;
        justify-content: space-around;
    }
    /* .flex-container2{
    } */
</style>
</html>

 

 

실습2) 완전 정중앙에 정렬해보기 (align-items)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="default.css">
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">HOME</div>
        <div class="flex-item">ITEM</div>
        <div class="flex-item">CUSTOM</div>
    </div>
</body>
<style>
    .flex-container{
        display:flex;
        justify-content: center;
        align-items: center;
        height: 300px;
    }
    /* .flex-container2{
    } */
</style>
</html>

저것이 만약 아이콘이라면 더 효과적으로 사용할 수 있다!

 

실습3) flex 박스 안에 요소들의 간격 넓히기 (align-content)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="default.css">
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
    </div>
</body>
<style>
    .flex-container{
        display:flex;
        /* justify-content: center; */
        /* align-items: center; */
        flex-wrap:wrap;
        height: 300px;
    }
    /* .flex-container2{
    } */
</style>
</html>

이런식으로 있을 때 행간 간격을 늘리고 싶다면 

align-content를 사용하자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="default.css">
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
        <div class="flex-item">HOME</div>
        <div class="flex-item">MYPAGE</div>
        <div class="flex-item">CUSTOM</div>
    </div>
</body>
<style>
    .flex-container{
        display:flex;
        /* justify-content: center; */
        /* align-items: center; */
        align-content: space-between;
        flex-wrap:wrap;
        height: 300px;
    }
    /* .flex-container2{
    } */
</style>
</html>

 

 

 

'CSS' 카테고리의 다른 글

css 초보 실습 - 헤더에 있는 회원가입,로그인 버튼 정렬 실습  (0) 2023.09.02
flex를 이용한 간단한 반응형  (0) 2023.09.02

'CSS' Related Articles

티스토리툴바