CSS_10_flexbox 연습문제

분석하기
1. 3행으로 나누고 2번째 행을 3열로 나누기
2. 비율 설정하기

html code

<h1>문제1</h1>

<div class="container1">
	<div class="header1"></div>
    
 	<div class="body1">
		<div class="body1-1"></div>
		<div class="body1-2"></div>
		<div class="body1-3"></div>
	</div>
    
	<div class="footer1"></div>
</div>

css code

div {
    border: 1px solid black;
}

.container1 {
    display: flex;
    width: 800px;
    height: 500px;
    flex-direction: column;
}

.header1, .footer1 {
    flex-basis: 20%;
    background-color: gray;
}

.body1 {
    flex-basis: 60%;
    display: flex;
}

.body1-1{
    flex-basis: 30%;
    background-color: skyblue;
}

.body1-2{
    flex-basis: 50%;
    background-color: brown;
}

.body1-3{
    flex-basis: 20%;
    background-color: beige;
}

분석하기
1. 행을 2개로 나눈 다음 2번째 행을 2열로 나눔
2. 오른쪽 아래를 또 2행으로 나눔

html code

<h1>문제2</h1>

<div class="container2">
	<div class="header2"></div>
	<div class="body2">
		<div class="body2-1"></div>
		<div class="body2-2">
			<div class="body2-2-1"></div>
			<div class="body2-2-2"></div>
		</div>
	</div>
</div>

css code

.container2 {
    display: flex;
    width: 800px;
    height: 500px;
    flex-direction: column;
}

.header2 {
    flex-basis: 20%;
    background-color: red;
}

.body2 {
    flex-basis: 80%;
    display: flex;
}

.body2-1 {
    flex-basis: 30%;
    background-color: yellow;
}

.body2-2 {
    display: flex;
    flex-basis: 70%;
    flex-direction: column;
}

.body2-2-1 {
    flex-basis: 80%;
    background-color: yellowgreen;
}

.body2-2-2 {
    flex-basis: 20%;
    background-color: blue;
}

분석하기
1. 2행으로 나누기
2. 2번째 행을 2열로 나누기
3. 나눠진 2열을 다시 2행으로 나누기
4. 나눠진 행 중 1번째 행을 다시 2열로 나누기

html code

<h1>문제3</h1>

<div class="container3">
	<div class="header3"></div>
	<div class="body3">
		<div class="body3-1"></div>
		<div class="body3-2">
			<div class="body3-2-1">
				<div class="body3-2-1-1"></div>
				<div class="body3-2-1-2"></div>
			</div>
			<div class="body3-2-2"></div>
		</div>
	</div>
</div>

css code

.container3 {
    display: flex;
    width: 800px;
    height: 500px;
    flex-direction: column;
}

.header3 {
    flex-basis: 30%;
    background-color: yellow;
}

.body3 {
    flex-basis: 70%;
    display: flex;
}

.body3-1 {
    flex-basis: 30%;
    background-color: skyblue;
}

.body3-2 {
    flex-basis: 70%;
    display: flex;
    flex-direction: column;
}

.body3-2-1 {
    flex-basis: 50%;
    display: flex;
}

.body3-2-2 {
    flex-basis: 50%;
    background-color: hotpink;
}

.body3-2-1-1 {
    flex-basis: 70%;
    background-color: aquamarine;
}

.body3-2-1-2 {
    flex-basis: 30%;
    background-color: red;
}

분석하기
1. 3행으로 나눈다
2. 2번째 행을 2열로 나눈다
3. 중간 오른쪽 열에 item 3개를 만들고 배치

html code

<h1>문제4</h1>

<div class="container4">
	<div class="header4"></div>
	<div class="body4">
		<div class="body4-1"></div>
		<div class="body4-2">
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>
	</div>
	<div class="footer4"></div>
</div>

css code

.container4 {
    display: flex;
    width: 800px;
    height: 500px;
    flex-direction: column;
}

.header4, .footer4 {
    flex-basis: 20%;
    background-color: aquamarine;
}

.body4 {
    flex-basis: 60%;
    display: flex;
}

.body4-1 {
    flex-basis: 30%;
    background-color: aqua;
}

.body4-2 {
    flex-basis: 70%;
    background-color: orange;
    display: flex;

    /* align-items: end; */
    flex-wrap: wrap-reverse;
    /* 위에 두개 다 결과 같음 */
    justify-content: space-between;
}

.box {
    height: 150px;
    width: 150px;
}

분석하기

html code

<h1>문제5</h1>

<div class="container5">
	<div class="header5">
		<div class="header5-1"></div>
		<div class="header5-2"></div>
		<div class="header5-3"></div>
	</div>
    
	<div class="body5">
		<div class="body5-1">
			<div class="body5-1-1"></div>
			<div class="body5-1-1"></div>
			<div class="body5-1-1"></div>
		</div>
        
		<div class="body5-2"></div>
        
		<div class="body5-3">
			<div class="body5-3-1"></div>
			<div class="body5-3-2">
				<div class="body5-3-2-1">
					<div class="body5-3-2-1-1"></div>
					<div class="body5-3-2-1-1"></div>
				</div>
                
				<div class="body5-3-2-2"></div>
			</div>
		</div>
        
		<div class="body5-4">
			<div class="body5-4-1"></div>
			<div class="body5-4-2"></div>
			<div class="body5-4-1"></div>
		</div>
	</div>
</div>

css code

.container5 {
    display: flex;
    width: 800px;
    height: 500px;
    flex-direction: column;
}

.header5 {
    flex-basis: 30%;
    display: flex;
}

.header5-1 {
    flex-basis: 20%;
    background-color: yellow;
}

.header5-2 {
    flex-basis: 50%;
    background-color: yellow;
}

.header5-3 {
    flex-basis: 30%;
    background-color: yellow;
}

.body5 {
    flex-basis: 80%;
    display: flex;
}

.body5-1 {
    flex-basis: 30%;
    display: flex;
    flex-direction: column;
}

.body5-1-1 {
    flex-basis: calc(100%/3);
    background-color: skyblue;
}

.body5-2 {
    flex-basis: 10%;
    background-color: pink;
}

.body5-3 {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
}

.body5-3-1{
    flex-basis: 50%;
    background-color: orange;
}

.body5-3-2 {
    flex-basis: 50%;
    display: flex;
}

.body5-3-2-1 {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
}

.body5-3-2-1-1 {
    flex-basis: 50%;
    background-color: green;
}

.body5-3-2-1-2 {
    flex-basis: 50%;
    background-color: green;
}

.body5-3-2-2 {
    flex-basis: 50%;
    background-color: red;
}

.body5-4 {
    flex-basis: 10%;
    display: flex;
    flex-direction: column;
}

.body5-4-1 {
    flex-basis: 20%;
    background-color: pink;
}

.body5-4-2 {
    flex-basis: 60%;
    background-color: pink;
}

어려웠던 점

3등분 돼있는 부분을 나누는 방법을 몰라서 헤맸다

해결 방법

calc(100%/3) 함수식을 이용