부모 요소인 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>'개발일지 > HTML' 카테고리의 다른 글
| 정방향 세로배치, 역방향 세로배치 - flex-direction (0) | 2022.11.07 |
|---|---|
| 정방향 가로배치, 역방향 가로배치 - flex-direction (0) | 2022.11.07 |
| justify-content 와 align-items 차이점 (0) | 2022.11.07 |
| HTML - 1 (0) | 2022.11.02 |
| HTML이란? (0) | 2022.11.02 |
댓글