[코딩 공부_81] flex에 대해 알아보자

hanbom 사이트를 클론코딩하며 가장 많이 봤던 부분이 flex였다! 그 당시엔 float만 배워서 float만 사용했다 ㅎㅎ..

호환성이 float이 더 좋아서 float을 자주 사용하지만 flex가 더 최신이고 사용법이 쉽다는 점! 나는 flex를 선호하지만 한가지만 사용하면 안된다!! 사이트에 따라 사용해야한다!!

1. flex : layout 배치 방식

- flexbox가 웹 개발자들의 관심 받게 된 이유 중 하나는 웹 최초로 적절한 정렬 기능을 제공했기 때문이다.

- 가로/세로 중앙 정렬을 쉽게 할 수 있다!!

- flex 속성은 부모와 자식이 꼭 필요하다(부모는 container, 자식은 item)

2. flex 사용하기

- 부모 요소에 display : flex;로 시작

- 가로 배치

- 컨텐츠의 width만큼 크기를 차지한다

- 부모의 크기만큼 item의 height가 늘어난다

3. flex container 속성

속성	의미
dispaly	Flex container를 정의
flex-flow	flex-direction와 flex-wrap의 단축 속성
flex-direction	flex items의 주 축을 설정
flex-wrap	flex items의 여러 줄 묶음 설정
justify-content	주 축의 정렬 방법 설정
align-content	교차 축의 정렬방법 설정(2줄 이상)
align-items	교차 축에서 items의 정렬방법을 설정(1줄)

4. 실습

<flex-header>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex-header</title>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    a {
        color: inherit;
        display: inline-block;
        text-decoration: none;
    }
    .wrap {
        max-width: 960px;
        margin: 0 auto;
        border: 1px solid #000;
    }
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;
        padding: 0 2rem;
    }
    .logo {
        background: pink;
    }
    .gnb {
        background: teal;
    }
</style>
</head>
<body>
    <div class="wrap">
        <header>
            <h1 class="logo">
                logo
            </h1>
            <div class="gnb">
                <a href="#">menu1</a>
                <a href="#">menu2</a>
                <a href="#">menu3</a>
            </div>
        </header>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex basic</title>
<style>
    .flexbox-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container {
        background: pink;
        height: 300px;
        /* 컨텐츠를 정리하겠다 나열하겠다 */
        /* justify-content: flex-end; */
        /* value: flex-start, center, flex-end */
        /* flex가 만능은 아니다 */
        width: 600px;
        display: flex;
        margin: 0 auto;
        flex-wrap: wrap;
        align-content: stretch;
        align-items: center

    }
    .item {
        /* background: teal; */
        /* flex상태에서 item은 유사 block 상태가 된다 */

        border: 1px solid blue;
        width: 100px;
        height: 100px;
        background: coral;
    }
</style>
</head>
<body>
    <div class="container flexbox-center">
        <div class="item">aaaa</div>
        <div class="item">bbbbbbb</div>
        <div class="item">ccc</div>
        <div class="item">ddd</div>
        <div class="item">eee</div>
        <div class="item">ffffff</div>
        <div class="item">gg</div>
        <div class="item">hhh</div>
        <div class="item">iiiii</div>
        <div class="item">j</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex prac1</title>
<style>
    .flexbox-center {
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    body {
        height: 100vh;
    }
    .wrap {
        background: gold;
        width: 300px;
        height: 300px;
    }
    .container {
        background: skyblue;
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .item {
        background: pink;
        width: 50px;
        height: 50px;
        
    }
</style>
</head>
<body>
    <div class="flexbox-center">
        <div class="wrap flexbox-center">
            <div class="container">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex property</title>
<style>
    .container {
        background: gold;
        display: flex;
        height: 100px;
        align-items: center;
    }
    .item {
        height: 50px;
        background: dodgerblue;
        flex: 1;
    }
    .item:nth-child(1) {
        order: 3;
    }
    .item:nth-child(2) {
        background: coral;
        flex: 1;
        order: 2;
    }
    .item:nth-child(3) {
        background: teal;
        flex: 1;
        order: 1;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="item">box1</div>
        <div class="item">box2</div>
        <div class="item">box3</div>
    </div>
</body>
</html>

저작자표시 비영리 변경금지

'웹 > CSS' 카테고리의 다른 글

[코딩 공부_92] 마우스 커서 이미지 변경하기 (0)	2021.06.09
[코딩 공부_82] flex 게임을 해보자 (0)	2021.05.25
[코딩 공부_79] hanbom-project 클론코딩 완성 (0)	2021.05.22
[코딩 공부_78] transform-origin? (0)	2021.05.21
[코딩 공부_76] css 스크롤바 스타일 변경하기 (0)	2021.05.14

BEE_STUDY

[코딩 공부_81] flex에 대해 알아보자

'웹 > CSS' 카테고리의 다른 글

댓글

티스토리툴바

[코딩 공부_81] flex에 대해 알아보자

'웹 > CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바