CSS
[CSS] Flex
로아다
2023. 6. 8. 09:23
728x90
반응형
display: flex
- 내부 요소들의 크기를 자동으로 조절해주는 display 속성
- display: flex로 설정한 요소는 flex-container가 되고 해당 컨테이너 내부의 요소들은 flex-item이 된다.
flex-direction : 이 컨테이너가 items를 나열하는 방향 결정
- row : 가로로 나열하기 (왼 -> 오)
- row-reverse : 가로로 나열하기 (오 -> 왼)
- column : 세로로 나열하기 (위 -> 아래)
- column-reverse : 세로로 나열하기 (아래 -> 위)
flex-direction: row-reverse; /* items의 방향을 결정 */
justify-content : flex-direction 방향의 정렬 설정
- flex-start: flex-direction의 시작 지점으로 정렬
- flex-end: flex-direction의 끝 지점으로 정렬
- space-around: 바깥 쪽에 약간 여백을 준 후 적당히 배치하기
- space-between: 바깥 쪽 여백 없이 적당히 배치하기
justify-content: space-around; /* items의 정렬 방식을 결정 */
align-items : flex-direction 기준 수직 방향의 정렬 설정
- flex-start: flex-direction의 시작 지점으로 정렬
- flex-end: flex-direction의 끝 지점으로 정렬
- stretch: 모든 아이템들을 최대한 늘린다.
- center: 가운데 위치로 배치한다.
- baseline: 모든 아이템들의 컨텐츠 위치를 기준으로 정렬한다.
align-items: flex-start; /* items의 세로 정렬을 결정 */
<!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>16_Flex.html</title>
<link rel="stylesheet" href="./assets/css16.css">
<script src="https://kit.fontawesome.com/e49f385ff0.js" crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
</style>
</head>
<body>
<h3># display: flex</h3>
<ul>
<li>내부 요소들의 크기를 자동으로 조절해주는 display 속성</li>
<li>display: flex로 설정한 요소는 flex-container가 되고 해당 컨테이너 내부의 요소들은 flex-item이 된다.</li>
</ul>
<!-- container-->
<div id="flex1">
<!-- item-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<h3># flex-direction: row</h3>
<div class="flex-row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<hr>
<div id="row2" class="flex-row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<hr>
<div id="row3" class="flex-row space">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3># flex-direction: column</h3>
<div class="flex-column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<hr>
<div id="column2" class="flex-column">
<div>1</div>
<div>2</div>
<div><a href="https://flexboxfroggy.com/#ko"><i class="fa-solid fa-frog fa-bounce"
style="padding:15px; color: white;"></i></a></div>
</div>
<hr>
<h3># flex-wrap: wrap을 통해 레이아웃을 구성할 수 있다.</h3>
<div id="wrap" class="flex-row">
<div>a</div>
<div>
<div>b-1</div>
<div>b-2</div>
</div>
<div>c</div>
<div>d</div>
</div>
<hr>
<div id="div4">
<div>
<p class="primary">Primary</p>
<p class="Welcome">Welcome Gradient</p>
<p class="main-color">#fafa2c</p>
<p id="sub-color">#99e0da</p>
</div>
<div>
<p class="primary">Primary</p>
<p class="Welcome">Welcome Pine</p>
<p class="main-color">#302e2e</p>
</div>
<div>
<p class="primary">Primary</p>
<p class="Welcome">Welcome White</p>
<p class="main-color">#ffffff</p>
</div>
<div>
<div>
<p class="nothing">hi</p>
<p class="color">Pistachio</p>
<p class="mini-color">#ecf8f8</p>
</div>
<div>
<p class="nothing">hey</p>
<p class="color">Sea</p>
<p class="mini-color">#7cc5c5</p>
</div>
</div>
<div>
<div>
<p class="nothing">hello</p>
<p class="color">Land</p>
<p class="mini-color">#fcff40</p>
</div>
<div>
<p class="nothing">welcome</p>
<p class="color">Grass</p>
<p class="mini-color">#a2c256</p>
</div>
</div>
<div>
<div>
<p class="nothing">nice</p>
<p class="color">Metal</p>
<p class="mini-color">#cfcfcf</p>
</div>
<div>
<p class="nothing">good</p>
<p class="color">Steel</p>
<p class="mini-color">#a5a5a5</p>
</div>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
user-select: none;
}
#flex1 {
display: flex;
background-color: #b4dab4;
/*
# flex-direction : 이 컨테이너가 items를 나열하는 방향 결정
- row : 가로로 나열하기 (왼 -> 오)
- row-reverse : 가로로 나열하기 (오 -> 왼)
- column : 세로로 나열하기 (위 -> 아래)
- column-reverse : 세로로 나열하기 (아래 -> 위)
*/
flex-direction: row-reverse; /* items의 방향을 결정 */
/*
# justify-content : flex-direction 방향의 정렬 설정
- flex-start: flex-direction의 시작 지점으로 정렬
- flex-end: flex-direction의 끝 지점으로 정렬
- space-around: 바깥 쪽에 약간 여백을 준 후 적당히 배치하기
- space-between: 바깥 쪽 여백 없이 적당히 배치하기
*/
justify-content: space-around; /* items의 정렬 방식을 결정 */
/*
# align-items : flex-direction 기준 수직 방향의 정렬 설정
- flex-start: flex-direction의 시작 지점으로 정렬
- flex-end: flex-direction의 끝 지점으로 정렬
- stretch: 모든 아이템들을 최대한 늘린다.
- center: 가운데 위치로 배치한다.
- baseline: 모든 아이템들의 컨텐츠 위치를 기준으로 정렬한다.
*/
align-items: flex-start; /* items의 세로 정렬을 결정 */
height: 500px;
}
#flex1 > * {
width: 100px;
background-color: seagreen;
padding: 20px;
color: white;
font-size: 25px;
}
.flex-row {
display: flex;
flex-direction: row;
height: 200px;
}
.flex-column {
display: flex;
flex-direction: column;
height: 400px;
}
[class^="flex-"] {
background-color: #b4dab4;
}
[class^="flex-"] > * {
width: 100px;
height: 100px;
color: white;
background-color: seagreen;
font-size: 25px;
padding: 20px;
}
#row2 {
justify-content: space-between;
}
#row2 > :nth-child(2) {
background-color: orange;
/* flex-container 내부에서 해당 아이템의 우선 순위를 설정 */
order: 1;
align-self: center;
}
#row2 > :nth-child(3) {
/* flex-container 내부에서 해당 아이템의 수직 정렬을 설정 */
align-self: flex-end;
}
#row3 {
justify-content: space-around;
align-items: baseline;
}
#row3 > :first-child {
padding-top: 80px;
height: 100%;
}
#row3 > :nth-child(2) {
padding-bottom: 80px;
height: 130px;
}
#row3 > :nth-child(3) {
width: 100px;
height: auto;
}
#column2 {
justify-content: space-evenly;
}
#column2 > :nth-child(2) {
align-self: flex-end;
}
#column2 > :nth-child(3) {
align-self: center;
order: -1;
}
#wrap {
/*
wrap: 더 이상 넣을 공간이 없으면 줄을 바꾼다.
nowrap: 더 이상 넣을 공간이 없으면 item의 크기를 줄인다.
*/
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
height: 800px;
}
#wrap > div {
width: 45%;
}
#wrap > div:first-child {
width: 70%;
height: 50%;
}
#wrap > div:nth-child(2) {
width: 30%;
height: 50%;
display: column;
padding: 0;
}
#wrap > div:nth-child(2) > :first-child {
color: black;
background-color: white;
height: 50%;
}
#wrap > div:nth-child(2) > :last-child {
background-color: crimson;
height: 50%;
}
#wrap > div:nth-child(3) {
width: 30%;
height: 50%;
background-color: skyblue;
}
#wrap > div:nth-child(4) {
width: 70%;
height: 50%;
background-color: cornflowerblue;
}
/*--------------------------------------------- */
#div4 {
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
width: 900px;
height: 1000px;
}
#div4 > :first-child {
width: 300px;
height: 60%;
background-color: #fafa2c;
background: linear-gradient(to right, #fafa2c, #99e0da);
}
#div4 > * > .primary {
font-size: 14px;
font-family: 'Manrope', sans-serif;
margin: 50px 10px 10px 25px;
}
#div4 > * > .Welcome {
font-family: 'Manrope', sans-serif;
font-size: 20px;
margin-left: 25px;
}
#div4 > :nth-child(2) {
width: 300px;
height: 60%;
background-color: #302e2e;
color: white;
}
#div4 > :nth-child(3) {
width: 300px;
height: 60%;
background-color: #ffffff;
}
#div4 > :nth-child(4) {
display: flex;
flex-flow: row wrap;
width: 300px;
height: 40%;
}
#div4 > :nth-child(5) {
display: flex;
flex-flow: row wrap;
width: 300px;
height: 40%;
}
#div4 > :nth-child(6) {
display: flex;
flex-flow: row wrap;
width: 300px;
height: 40%;
}
#div4 > :nth-child(4) > :first-child {
width: 50%;
height: 100%;
background-color: #ecf8f8;
}
#div4 > :nth-child(4) > :last-child {
width: 50%;
height: 100%;
background-color: #7cc5c5;
}
#div4 > :nth-child(5) > :first-child {
width: 50%;
height: 100%;
background-color: #fcff40;
}
#div4 > :nth-child(5) > :last-child {
width: 50%;
height: 100%;
background-color: #a2c256;
}
#div4 > :nth-child(6) > :first-child {
width: 50%;
height: 100%;
background-color: #cfcfcf;
}
#div4 > :nth-child(6) > :last-child {
width: 50%;
height: 100%;
background-color: #a5a5a5;
}
#div4 > * > * .color {
font-family: 'Manrope', sans-serif;
font-size: 20px;
margin: 0px 0 0 25px;
}
#div4 > * > .main-color {
box-sizing: border-box;
display: inline-block;
justify-content: flex-start;
flex-direction: row;
font-size: 12px;
font-weight: bold;
margin: 400px 0 0 25px;
}
#sub-color {
display: inline-block;
font-size: 12px;
font-weight: bold;
margin: 0 0 0 150px;
}
#div4 > * > * > .nothing {
font-size: 12px;
margin: 30px 0 20px 25px;
}
#div4 > * > * > .mini-color {
font-size: 12px;
font-weight: bold;
margin: 250px 0 0 25px;
}728x90
반응형