728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<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>
<!--
1. Flexbox 부모 == container. 정렬할 자식을 가지는 요소
1-1)* flex-direction:
flex 컨테이너의 주측 방향을 설정한다 (row, column)
1-2)* flex-wrap:
flex 컨테이너의 item(자식들)을 한 줄, 여러줄 설정함 - wrap
만약 요소의 크기가 커서 컨테이너를 벗어날 시, 밖으로 나와버림
그럴 땐, overflow 속성으로 조절하면 된다.
1-3) flex-flow:
flex-direction 속성과 flex-wrap 속성을 함께 설정 기본 row nowrap
1-4)* justify-content:
flex의 컨테이너와 주축 기준으로 item들을 수평 정렬함
1-5)* align-item:
flex의 item들을 주축의 반대축방향으로 (교차방향으로)정렬 (수직정렬)
1-6) align-content:
flex의 컨테이너의 교차축을 기준으로 item들을 수직정렬한다.
2. Flexbox 자식들 == item. 정렬당하는 요소들
- float, clear, vertical-align 속성에 영향 받지 않음
2-1) order:
flex item의 배치 순서를 지정함. HTML 코드 변경 없이 재배치 가능
기본 배치는 작성 순서. 같은 순서를 가지는 자식이 있으면 HTML코드 순번을 따름
기본값:0, 높을수록 맨 뒤로 이동
2-2) flex-grow:
Flex item의 너비에 대한 확대정돌르 지정함. 기본값: 0, 음수는 x
2-3) flex-shrink:
flex item의 너비에 대한 축소정도를 지정함. 기본값:1, 음수는 x
0을 지정하면 원래 형태로 돌아간다.(기존 너비값으로 함)
2-4) flex-basis:
Flex item의 너비 기본값을 정해준다. px, % 등의 단위로 지정함. 기본 auto
2-5) flex:
flex-grow, flex-shrink, flex-basis 속성을 함께 지정 할 수 있는 속성.
기본값: 0 1 auto
2-6) align-self:
align-item 보다 우선적용
수직방향으로 정렬
Flex 컨테이너의 수직 방향 보다 우선 적용 되는 자신만의 정렬속성을 지정
-->
<style>
#container {
display: flex;
position: absolute;
background-color: beige;
width: 1000px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-weight: bold;
overflow: scroll;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
/* flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center; */
}
.item {
box-sizing: border-box;
border: 2px solid black;
background-color: darkcyan;
width: 150px;
height: 50px;
}
.item1 {
order:2;
}
.item2 {
order: 2;
}
.item3 {
flex-grow: 2;
}
.item4 {
flex-grow: 5;
}
.item5 {
flex-basis: 100px;
align-self: stretch;
/* flex-shrink: 5; */
}
</style>
</head>
<body>
<div id="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
<div class="item item5">item5</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
</body>
</html>728x90
반응형