![TIL] flex](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbufpce%2Fbtq5ov8Z8G4%2FfkCZOw3PvF33J0kMC9K3A1%2Fimg.png)
flex
flex는 Flexible Box, Flexobx라고도 불리며
flex는 레이아웃 배치 전용 기능으로 고안되었다.
토이 프로젝트를 하면서 flex를 이용하였는데 매우 편리하였다!
flex 관련 속성을 아래에서 살펴보자.
flex-wrap
flex-wrap은 요소들을 정렬하는 것이라고 생각하면 된다.
flex-wrap 속성은 정렬된 요소들의 총넓이가 부모 넓이보다 클 때, 이 요소들을 다음 줄에 이어서 정렬해준다.
flex-wrap은 display:flex;와 함께 사용한다.
아래의 예제를 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.wrap{
width: 300px;
height: 200px;
border: 1px solid black;
/*display: flex;*/
/*flex-wrap: wrap;*/
}
.flex{
width: 100px;
height: 100px;
}
</style>
<body>
<div class="wrap">
<div class="flex" style="background-color: blue;">1</div>
<div class="flex" style="background-color: red;">2</div>
<div class="flex" style="background-color: green;">3</div>
<div class="flex" style="background-color: gray;">4</div>
<div class="flex" style="background-color: tomato;">5</div>
</div>
</body>
</html>
위의 코드와 코드의 결과 화면이다.
위의 코드에 flex-wrap을 적용하면 어떻게될까?
아래 예제를 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.wrap{
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
.flex{
width: 100px;
height: 100px;
}
</style>
<body>
<div class="wrap">
<div class="flex" style="background-color: blue;">1</div>
<div class="flex" style="background-color: red;">2</div>
<div class="flex" style="background-color: green;">3</div>
<div class="flex" style="background-color: gray;">4</div>
<div class="flex" style="background-color: tomato;">5</div>
</div>
</body>
</html>
flex-wrap을 적용하면 위와 같이 나란히 정렬이 되는 모습을 확인할 수 있다!
정말 편안하게 사용할 수 있다!
flex-direction
flex-direction은 어떤 것일까?
flex-dirrection은 속성을 기재하지 않으면 기본값이 row이다.
row는 무엇일까? 예제를 통해 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.wrap{
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;
flex-direction: row;
}
.flex{
width: 100px;
height: 100px;
}
</style>
<body>
<div class="wrap">
<div class="flex" style="background-color: blue;">1</div>
<div class="flex" style="background-color: red;">2</div>
<div class="flex" style="background-color: green;">3</div>
<div class="flex" style="background-color: gray;">4</div>
<div class="flex" style="background-color: tomato;">5</div>
</div>
</body>
</html>
위의 예제를 실행하면 가로로 정렬된다.
row는 가로로 정렬하기 때문이다!
이밖에 것들은 결과 화면을 통해 살펴보자.
row-reverse는 가로로 오른쪽에서부터 정렬한다.
column은 세로로 정렬한다.
column-reverse는 세로로 밑에서부터 정렬한다.
flex는 정말 잘 활용할 수 있을 것 같다.
토이 프로젝트를 진행하면서 temp_html을 사용하다
세로로만 나오는 현상이 나와서 해결방안을 찾기 위해 flex를 사용하였는데
정말 편하게 사용이 가능하고 내가 원하던 결과에 너무 만족스러웠다!
'html과 css' 카테고리의 다른 글
| TIL]미디어쿼리 (0) | 2021.06.10 |
|---|---|
| TIL] details와 summary (0) | 2021.05.29 |
| TIL] border (0) | 2021.05.17 |
| TIL] table (0) | 2021.05.09 |
| TIL]first-child, last-child 선택자 (0) | 2021.05.06 |