display: flex
직계 자식들에게만 관련 속성들이 적용된다
display: flex 적용 시 본인에게
border-box: box-sizing, justify
부모display: flex부모justify-content: 가로 배치, flex-start(default), flex-end, center 등부모align-items: 세로 배치, flex-start(default), flex-end, center 등부모flex-direction: 가로(default)/세로 배치 지정,부모gap : n, 자식 사이 간격지정, 부모와 자식의 간격은 처리안한다.자식flex : n, 차지 비율 지정, width가 있을 경우 width 무시, 1(default)flow-grow: 1; flex-shring: 0;, flex-basis: auto;
자식flex-grow- Flex Container에 공간이 남을 경우 flex-basis 크기가 얼마나 더 할당 가능한지 지정
- 초기값은 0 이며, 음수 값은 불가능하다.
자식flex-shrink- Flex Container의 공간이 부족할 경우 flex-basis 크기를 얼마까지 줄일 수 있는지 지정
- 0을 지정하면 줄어들지 않는다.
자식flex-basis : flex 가 지정된 요소의 경우(auto가 아닌 경우) width는 무시된다.- flex-direction: row : 가로 길이 지정
- flex-direction: column : 세로 길이 지정
- flex-shink의 속성을 0 으로 설정하지 않으면 내부 컨텐츠에 따라 유연한 크기를 갖는다.
display: 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>플렉스(flex) 속성으로 자유롭게 자식요소 정렬하기</title>
<style>
.parent {
border: 5px solid #000;
width: 1320px;
overflow: hidden;
margin-bottom: 10px;
}
.parent div {
border: 5px solid red;
height: 200px;
float: left;
width: calc(1320px / 5);
box-sizing: border-box;
}
.parent_flex {
border: 5px solid #000;
width: 1320px;
display: flex; /* 이 속성이 적용되면 묵시적으로 box-sizing: border-box; 가 들어간다. */
/* flex 관련 속성은 직계 자식에게만 적용된다. */
/* justify-content: 수평정렬;
align-items: 수직 정렬; */
}
.parent_flex div {
border: 5px solid red;
height: 200px;
flex: 1; /* 차지 비율 설정 */
}
</style>
</head>
<body>
<div class="parent">
<div>child</div>
<div>child</div>
<div>child</div>
<div>child</div>
<div>child</div>
</div>
<div class="parent_flex">
<div>child</div>
<div>child</div>
<div>child</div>
<div>child</div>
<div>child</div>
</div>
</body>
</html>
열정, 끈기, 집념의 Frontend Developer