# 컨테이너자체가 block이 되느냐 아니면 inline형태의 block이 되느냐의 차이
display : inline-flex;
display: flex;
#flex-direction
row : items를 수평축으로 표시
row-reverse: items를 row의 반대 축으로 표시
column: items를 수직축으로 표시
column-reverse: items를 column의 반대축으로 표시
ex) flex-direction: row
#
flex-start : 시작점
flex-end: 끝점
#flex-wrap
nowrap: 모든 items를 여러 줄로 묶지 않고 한줄에 표시
wrap : items를 여러 줄로 묶음
wrap-reverse: items를 wrap의 역방향 묶음
#justify-content: 주측의 정렬방법
flext-start;
flex-end;
center;
space-between;
space-around;
#align-content: 교차측의 정렬방법
stretch;
flext-start;
flex-end;
center;
space-between;
space-around;
#align-items
stretch;
flext-start;
flex-end;
center;
baseline; 아이템을 문자 기준선에 정렬
#flex-grow: 증가너비;
ex) flex-grow: 1; 비율에 따라 크기 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
border: 2px solid red;
display: flex;
}
.container .item {
height: 100px;
border: 2px solid;
border-radius: 10px;
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
.item3 {
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
#flex-shrink : item이 감소하는 너비의 비율을 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
border: 2px solid red;
display: flex;
}
.container .item {
height: 100px;
border: 2px solid;
border-radius: 10px;
}
.item1 {
flex-basis: 200px;
flex-shrink: 1;
}
.item2 {
flex-basis: 200px;
flex-shrink: 2;
}
.item3 {
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
# flex-basis : item의 공간 배분 전 기본 너비를 설정합니다.
'2020 > CSS' 카테고리의 다른 글
| @media (0) | 2020.03.25 |
|---|---|
| css 다단 (0) | 2020.03.24 |
| animation-play-state (0) | 2020.03.24 |
| animation-fill-mode (0) | 2020.03.24 |
| animation-iteration-count, animation-direction (0) | 2020.03.24 |
꽃꽂이하는개발자