Flex 란?
수평정렬을 하기 위한 속성, 다양한 속성값과 결합하여 디스플레이를 나타내 보자
●flex-wrap
플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
1.nowrap : 기본값 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
2.wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘기기
3.wrap-reverse : 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 (단, 아래쪽이 아닌 위쪽으로 넘김)
●flex-direction
플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
1.row : 기본값 . 가로로 배치
2.row-reverse : 가로로 배치(반대로)
3.column :세로로 배치되는
4.column-reverse :세로로 배치 (반대로)
●flex-flow
-flex-wrap 과 flex-direction을 한꺼번에 지정할 수 있는 속성
예)flex-flow : row nowrap
●justify-content
-플렉스 요소의 수평방향 정렬방식을 설정
1.flex-start:기본값 .앞쪽에서부터 배치
2.flex-end :뒤쪽에서부터 배치
3.center :가운데 배치됨
4.space-between : 요소들 사이에 여유공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
5.space-around : 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)
●align - items
-플렉스 요소의 수직방향 정렬 방식을 결정
1.stretch : 기본값. 아이템들이 수직축 방향으로 늘어남
2.flex-start : 요소들이 시작점으로 정렬
3.flex-end : 요소들이 끝으로 정렬
4.center : 요소들이 가운데로 정렬
5.baseline : 요소들이 텍스트 베이스라인 기준을 정렬
●align-self
-플렉스 요소의 수직축으로 다른 align 속성값을 설정
●order
-플렉스 요소의 순서를 설정
●align-content
- 플렉스 요소가 설정된 상태에서 요소들이 2줄이상이 되엇을 때 수직방향 정렬방식을 설정
-flex-wrap 의 값을 wrap으로 설정해야함
1.stretch : 기본값. 위 아래로 늘어남
2.flex-start : 요소들이 시작점으로 정렬
3.flex-end : 요소들이 끝으로 정렬
4.center : 요소들이 가운데로 정렬
5.space-between : 요소들 사이에 여유공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
6.space-around : 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)
●flex-basis
-플렉스 요소의 기본 크기를 설정
1.flex-grow
- 플렉스 요소를 flex-basis의 설정한 값보다 커질 수 있는지 결정하는 속성
2.flex-shrink
- 플렉스 요소를 flex-basis의 설정한 값보다 작아질 수 있는지를 결정하는 속성
3.flex
- flex-grow, flex-shrink, flex-basis를 한 번에 설정할 수 있음
다양한 코드 예시를 통해 알아보자
HTML 코드1
<!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>플렉스 레이아웃1</title>
<style>
#container{
width: 1000px;
height: 500px;
margin: 0 auto;
border: 3px solid red;
display: flex;
/* flex-wrap :nowrap; 기본값
flex-wrap; :wrap;
flex-wrap: wrap-reverse;
*/
/* flex-direction: row; 기본값.*/
flex-direction: column-reverse;
}
#container>div{
width: 400px;
border: 1px solid black;
background-color: gold;
}
span{
font-size: 50px;
font-weight: bold;
padding: 20px;
}
</style>
</head>
<body>
<h2>플렉스 레이아웃1</h2>
<div id="container">
<div id="box1"><span>1</span></div>
<div id="box2"><span>2</span></div>
<div id="box3"><span>3</span></div>
</div>
</body>
</html>
결과1
HTML 코드2
<!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>플렉스 레이아웃2</title>
<style>
.wrapper{
width: 500px;
height: 200px;
margin: 0 auto;
border: 3px solid red;
}
.wrapper div{
width: 50px;
border: 2px solid black;
background-color: gold;
}
#container{
display: flex;
/* justify-content: flex-start; 기본값*/
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
justify-content: space-around;
/*align-items: stretch; 기본값*/
/*align-items: start; 기본값*/
/*align-items: end; 기본값*/
/*align-items: center; 기본값*/
align-items: baseline;
}
#box2{align-self: flex-end;}
#box1{order: 2;}
#box2{order: 1;}
#box3{order: 4;}
#box4{order: 3;}
#box5{order: 5;}
</style>
</head>
<body>
<h2>플렉스 레이아웃2</h2>
<div id="container" class="wrapper">
<div id="box1">
<p>1</p>
</div>
<div id="box2">
<p>2</p>
</div>
<div id="box3">
<p>3</p>
</div>
<div id="box4">
<p style="font-size: 50px;">4</p>
</div>
<div id="box5">
<p>5</p>
</div>
</div>
</body>
</html>
결과2
HTML코드3
<!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>플렉스 레이아웃3</title>
<style>
.wrapper{
width: 500px;
height: 200px;
margin: 0 auto;
border: 3px solid red;
}
.wrapper div{
width: 150px;
border: 2px solid black;
background-color: gold;
}
#container{
display: flex;
flex-wrap: wrap;
align-content: start;
}
</style>
</head>
<body>
<h2>플렉스 레이아웃3</h2>
<div id="container" class="wrapper">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
</div>
</body>
</html>
결과3
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_transfrom (0) | 2023.04.03 |
|---|---|
| CSS_미디어 쿼리 (1) | 2023.03.30 |
| CSS_다단 레이아웃 (0) | 2023.03.30 |
| CSS_clear (0) | 2023.03.30 |
| CSS_float (0) | 2023.03.30 |
