질문 내용
- 아래를 예를 들어 설명하시오.
- flex-direction - flex-wrap - flex-flow - justify-content - align-items - align-content- order - flex-grow - flex-shrink - flex-basis - flex
- flex 로 holy grail을 완성 하시오.
- 커피숍 프로젝트를 완성하시오.
개인 작성
- flex 관련 참고 사이트 : 1분 코딩
물론 작성한 내용은 위 사이트 내용을 그대로 옮긴 게 아니다. 내 개인적인 수업 정리본을 가져온 것이다.
- flex는 크게 부모 요소에 부여하는 것들과 자식 요소에 부여하는 것들로 나뉜다.
-> 먼저, 부모 요소에 display : flex 속성과 값을 할당해야 한다.
부모 요소에 부여하는 속성들
flex-direction
- 시작점과 방향 결정
- default : row.
- 값의 종류 : row, column, row-reverse, column-reverse
- row : 왼쪽에서 오른쪽.
- column : 위에서 아래로.
- row-reverse : 오른쪽에서 왼쪽
- column-reverse : 아래에서 위로
flex-wrap
- flex는 기본적으로는 자식 요소를 계속 집어넣을수록 자식 요소의 너비가 부모 너비에 맞춰서 자동 설정됨
- flex-wrap : wrap 값을 할당하게 되면, 자식 요소는 자신의 내부에 설정한 너비와 높이 값의 영향을 받는다.
- default : nowrap
- 값의 종류 : nowrap, wrap, wrap-reverse
- nowrap : wrap 없음
- wrap : 설정된 값으로 감싸기
- wrap-reverse : 규칙이 강제되지 않는 축의 기본 방향을 반대로 설정.
- row 계열 값일 경우, 자식 요소들이 많아질수록 아래에서 위로 쌓이는 규칙 생김.
- column 계열 값의 경우, 자식 요소들이 많아질수록 오른쪽으로 왼쪽으로 쌓이는 규칙 생김.
justify-content
- 주축 정렬에 필요. 방향이 기본값이면 가로.
- default : flex-start가 기본값
- 값의 종류 : flex-start, center, flex-end 등
- flex-start : 부모 요소의 주축 시작점부터 시작
- center : 주축 가운데
- flex-end : 부모 요소의 주축 끝점부터 시작
- space-around : 자식과 공간을 합친 크기만큼 주축을 나눠서 배치됨.
- 자식 요소 개수만큼 부모 요소 공간을 나눠서 해당 공간에 자식 요소를 가운데 정렬 후 나란히 배치.
-> 자식 요소가 가지는 margin값이 서로 합쳐져 첫 자식 margin-left와
마지막 자식 margin-right의 간격이 작지만 나머지 간격은 margin * 2 크기로 커짐.
- space-evenly : 주축에서 모든 자식 요소가 일정 간격을 두고 배치됨.
- space-between : 부모 요소의 주축 양끝 위치는 고정한 상태에서, 자식 요소들을 배치.
- 양 끝 자식 요소는 붙은 상태, 나머지는 일정 간격으로 벌어진 상태
align-items
- 교차축 정렬에 필요. 방향이 기본값이면 세로.
- default : baseline
- 주로 align-items : center 를 활용하여 교차축 가운데로 정렬하는 데 사용
자식 요소에 부여하는 속성들
order
- 자식 요소의 배치 순서를 결정
- 1이 시작 순서.
-> 숫자에 따라 배치가 달라짐.
flex-grow
- 자식 요소의 너비를 얼마나 늘릴지 숫자로 지정.
- 숫자는 배율을 의미
flex-shrink
- 자식 요소의 너비를 얼마나 줄일지 숫자로 지정
- default 값 : 1
- 0을 주면, 줄이지 말라는 의미이다.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0;">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>flex-basis
- 자식 요소의 크기를 다르게 주고 싶을 때 사용.
-> 초기값을 세팅하고 싶을 때 사용한다.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px;">3</div>
<div>4</div>
</div>flex: 0 0 200px;
- (flex-grow) (flex-shrink) (flex-basis) 를 한꺼번에 부여하고자 할 때 사용하는 명령어.
-
연습파일.
해당 부분에서 염두하게 된 요소 : container 크기 조절 시 vw, vh를 적절하게 사용할 수 있어야 한다.
- 부모 요소에 width, height에 대한 기준이 잡혀 있지 않으면 속성이 미적용되는 상황이 나오기 때문에,
이 단위는 해당 상황을 타개할 수 있는 수단으로 염두해 둔다. - width의 경우에는 vw, height는 vh로 값을 부여해야 한다.
각각 viewport height, viewport width를 뜻한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
flex-direction: column;
text-align: center;
color: rgba(240, 248, 255, 0.849);
}
header {
width: 100%;
height: 15vh;
background-color: blue;
line-height: 15vh;
}
.contents {
width: 100%;
height: 70vh;
display: flex;
padding: 5px;
}
.contents div {
width: 25%;
line-height: 30vh;
margin: 5px;
background-color: palevioletred;
}
.contents .main-content {
flex: 2;
background-color: greenyellow;
}
footer {
height: 15vh;
line-height: 15vh;
background-color: aqua;
}
@media screen and (max-width:700px) {
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
flex-direction: column;
text-align: center;
color: rgba(240, 248, 255, 0.849);
}
header {
width: 100%;
height: 10vh;
background-color: blue;
line-height: 10vh;
}
.contents {
width: 100%;
height: 70vh;
display: flex;
flex-direction: column;
padding: 5px;
}
.contents div {
width: 100%;
line-height: 13vh;
margin: 5px;
background-color: palevioletred;
}
.contents .subnav, .contents .sidebar{
flex: 1;
}
.contents .main-content {
flex: 2;
background-color: greenyellow;
}
footer {
height: 10vh;
line-height: 10vh;
background-color: aqua;
}
}
</style>
</head>
<body>
<div class="container">
<header>HEADER</header>
<div class="contents">
<div class="subnav">SUBNAV</div>
<div class="main-content">MAIN CONTENT</div>
<div class="sidebar">SIDEBAR</div>
</div>
<footer>FOOTER</footer>
</div>
</body>
</html>
두리둥둥