<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex layout</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css"
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="commos.css">
<link rel="stylesheet" type="text/css" href="test.css">
<style>
/*
flexible 레이아웃 스타일
-영역은 display가 flex이거나 inline-flex여야 한다.
*/
.flex-container {
display: flex;
}
.inline-flex-container {
display: inline-flex;
}
.flex-container.auto-width>*,
.inline-flex-container.auto-width>* {
flex-grow: 1;
}
.flex-container.vertical,
.inline-flex-container.vertical {
flex-direction: column;
}
.flex-container.align-center,
.inline-flex-container.align-center {
align-items: center;
justify-content: center;
}
.flex-container.allow-wrap,
.inline-flex-container.allow-wrap{
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container w-600">
<div class="row">
<h1>Flex 배치</h1>
</div>
<div class="row left">
flex는 영역에 display를 설정하여 영역 전체의 정렬 방식을 정하는 기법<br>
flex는 내부 요소들의 높이를 자동으로 맞춘다
</div>
<div class="row" style="display:flex;">
<div>첫번째<br>첫번째</div>
<div>두번째</div>
</div>
<div class="row left">
flex 영역에는 여러 가지 설정을 추가하여 효과를 다르게 줄 수 있다
</div>
<div class="row" style="display:flex; flex-direction: column;">
<div>첫번째<br>첫번째</div>
<div>두번째</div>
</div>
<div class="row" style="display:flex; flex-direction: column-reverse;">
<div>첫번째<br>첫번째</div>
<div>두번째</div>
</div>
<div class="row" style="display:flex; flex-direction: row;">
<div>첫번째<br>첫번째</div>
<div>두번째</div>
</div>
<div class="row" style="display:flex; flex-direction: row-reverse;">
<div>첫번째<br>첫번째</div>
<div>두번째</div>
</div>
<div class="row left">
flex는 설정에 따라 폭이 100%가 넘어도 줄바꿈이 이루어지지 않게 할 수 있다
</div>
<div class="row" style="display: flex; flex-wrap: nowrap;">
<div class="w-100">첫번째</div>
<div class="w-100">두번째</div>
</div>
<div class="row" style="display: flex; flex-wrap: wrap;">
<div class="w-100">첫번째</div>
<div class="w-100">두번째</div>
</div>
<div class="row left">
flex는 나머지 폭을 자동으로 채우는 옵션이 있다.
</div>
<div class="row" style="display: flex;">
<div style="width:200px">사이드바</div>
<div style="flex-grow: 1;">컨텐츠</div>
</div>
<div class="row" style="display: flex;">
<div style="flex-grow: 1;">사이드바</div>
<div style="flex-grow: 3;">컨텐츠</div>
</div>
<div class="row left">
flex 배치에서 다음 두 속성을 이용하여 정렬방식을 지정할 수 있다
<ul>
<li>justify-content - 가로 정렬 설정 속성</li>
<li>align-items - 세로 정렬 설정 속성</li>
</ul>
</div>
<div class="row" style="display: flex; height: 300px; justify-content: left; align-items: start;">
<div>컨텐츠 내용</div>
</div>
<div class="row flex-container">
<div>첫번째</div>
<div>두번째</div>
<div>세번째</div>
</div>
<div class="row flex-container auto-width">
<div>첫번째</div>
<div>두번째</div>
<div>세번째</div>
</div>
<div class="row flex-container vertical">
<div>첫번째</div>
<div>두번째</div>
<div>세번째</div>
</div>
</div>
</body>
</html>