본문 바로가기
HTML CSS JS

CSS Flex

by wanttosleep1111 2023. 1. 9.

CSS Flex

 

1. Flex

  • 레이아웃 배치 전용 기능
  • 내가 움직이고 싶은, 배치하고 싶은 요소 : Item
  • Item의 부모 요소 : Container

※ 한 가지 요소는 Item이자 Container일 수 있다.

 

2. Container 속성

flex 설정 display: flex;  
flex-direction 배치 방향 설정 flex-direction: row; (기본값) 메인축 : 가로, 서브축 : 세로(수직)
flex-direction: column; 메인축 : 세로, 서브축 : 가로(수평)
justify-content 메인축 정렬 justify-content: center;  
align-items 서브축 정렬 align-items: center;  
flex-wrap 줄넘김 처리 flex-wrap: wrap;  

 

3. Item 속성

flex-basis : 아이템 기본 크기 설정

flex-basis: %;

 

▶ 연습

flex-direction: row;

justify-content: center;

<!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">
    <title>Document</title>
    <style>
        .container{
            background-color: whitesmoke;
            height: 500px;

            display: flex;

            flex-direction: row;

            justify-content: center;

        }
        .item{
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item" id="center"></div>
        <div class="item"></div>
    </div>
</body>
</html>

 

 

▶ 연습

flex-direction: column;

justify-content: center;

<!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">
    <title>Document</title>
    <style>
        .container{
            background-color: whitesmoke;
            height: 500px;

            display: flex;

            flex-direction: column;

            justify-content: center;

        }
        .item{
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item" id="center"></div>
        <div class="item"></div>
    </div>
</body>
</html>

 

 

▶ 연습

flex-direction: row;

justify-content: center;

align-items: center;

 

<!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">
    <title>Document</title>
    <style>
        .container{
            background-color: whitesmoke;
            height: 500px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

        }
        .item{
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- div.item*3 -->
        <div class="item"></div>
        <div class="item" id="center"></div>
        <div class="item"></div>
    </div>
</body>
</html>

 

 

 

 

▶ 연습

flex-direction: column;

justify-content: center;

align-items: center;

 

<!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">
    <title>Document</title>
    <style>
        .container{
            background-color: whitesmoke;
            height: 500px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

        }
        .item{
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- div.item*3 -->
        <div class="item"></div>
        <div class="item" id="center"></div>
        <div class="item"></div>
    </div>
</body>
</html>

 

 

▶ 연습

flex-direction: row;

justify-content: center;

align-items: center;

 

item 속성

양쪽 flex-basis: 15%;

가운데 flex-basis: 70%;

<!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">
    <title>Document</title>
    <style>
        .container{
            background-color: whitesmoke;
            height: 500px;

            display: flex;

            flex-direction: row;

            justify-content: center;

            align-items: center;
        }
        .item{
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            border: 1px solid black;
            flex-basis: 15%;
        }
        
        #center{
            flex-basis: 70%;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- div.item*3 -->
        <div class="item"></div>
        <div class="item" id="center"></div>
        <div class="item"></div>
    </div>
</body>
</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">
    <title>Document</title>
    <style>
        .container{
            background-color: whitesmoke;
            height: 100px;

            display : flex;
        }
        .container>div{
            /* border: 1px solid black; */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1,.box2{
            flex-basis: 15%;
        }
        .box2{
            flex-basis: 70%;
        }
        .box2>a, .box3>a{
            margin: 10px;
        }
        .container a{
            text-decoration: none;
            color: black;
            font-size: 20px;
            padding: 10px;
        }
        .container a:hover{
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">
            <h1>EatSleepCodeRepeat</h1>
        </div>
        <div class="box2">
            <a href="#">메뉴</a>
            <a href="#">베스트</a>
            <a href="#">뉴스</a>
        </div>
        <div class="box3">
            <a href="#">로그인</a>
            <a href="#">회원가입</a>
        </div>
    </div>
</body>
</html>
저작자표시 비영리 변경금지

'HTML CSS JS' 카테고리의 다른 글

CSS 선언 방식  (0) 2023.01.10
CSS Position  (0) 2023.01.10
CSS margin, padding, box-sizing, border  (0) 2023.01.08
CSS display  (0) 2023.01.08
CSS 선택자  (0) 2023.01.05

관련글

댓글

티스토리툴바