개발일지/HTML

flex란

ZI_CO 2022. 11. 7. 10:50

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,
자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다.
“컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하면 된다.

<!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>
        /* 
            부모요소
            규칙 1 -> 부모 요소에다 속성을 지정하는 방법
            dispaly: flex / justify-content / align-items / flex-dirction / 
            flex-wrap / align-content
        
            자식요소 쓰이는 속성
            flox-grow / flex-shrink / flex-basis / flex / order / align-self
        */
        body {
            background-color: aqua;
            height: 100vh;
            margin: 0px;
            display: flex;
            justify-content: center;
            align-items: center;       
        }

        div {
            width: 100px;
            height: 100px;
            /* position: absolute;
            top: 50%;
            left: 50%; */
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>