728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>flex</title>
<meta charset="UTF-8">
<style>
body > .flex-container {
top: 0;
left: 0;
width: 100%;
height: 250px;
/* height: 100%; */
background-color: rgb(238, 199, 27);
position: absolute;
/* transform: translateY(-50%); */
display: flex;
/* display : flex; > 해당 선택자에 의해 선택되는 요소가 가지는 자식요소의 정렬을 쉽게 할 수있음.*/
flex-direction: row;
/*flex-direction: 내부 자식 FLEX 방향
row : 가로방향으로
row-reverse : 가로 역방향으로
column : 세로방향으로
column-reverse : 세로 역방향으로
*/
justify-content: center;
/* justify-content: flex-direction과 수평한 방향에 대한 정렬
flex-start : 시작점 정렬
center : 가운데
flex-end : 끝점 정렬
*/
align-items: stretch;
/* align-items: flex-firection 과 수직한 방향에 대한 정렬
flex-start : 시작점 정렬
center : 가운데
flex-end : 끝점 정렬
stretch : 늘임
*/
}
body > .flex-container > .s {
width: 100px;
/* height: 100px; */
background-color: rgb(0, 89, 255);
}
body > .flex-container > .r {
width: 50px;
/* height: 50px; */
/* background-color: rgb(0, 255, 149); */
border-radius: 50%;
flex-grow: 1;
flex-shrink: 1;
}
body > .flex-container > .d {
width: 150px;
/* height: 150px; */
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<div class="flex-container">
<div class="s"></div>
<div class="r"></div>
<div class="d"></div>
</div>
</body>
</html>
728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| margin(외부여백) (0) | 2022.12.24 |
|---|---|
| font(폰트 설정과 외부 폰트 적용) (0) | 2022.12.24 |
| filter(이미지나 요소에 효과주기) (0) | 2022.12.24 |
| display(표시 설정) (0) | 2022.12.24 |
| cursor(커서모양) (0) | 2022.12.24 |