Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- cleancode
- JavaScript
- media query
- webpack
- github
- java
- git
- node.js
- coding
- 변수
- @media
- frontend
- TypeScript
- 코드업
- 그럼에도 불구하고
- CSS
- JS
- 그럼에도불구하고
- 코딩테스트
- Servlet
- 프론트엔드
- 자바
- HTML
- max-width
- react
- react-router-dom
- redux
- node
- 반응형 페이지
- 자바문제풀이
Archives
- Today
- Total
그럼에도 불구하고
[Visual Studio Code] justify-content 본문
CSS 속성 중에
justify-content를 사용해보자
Code
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<link rel="stylesheet" href="../style/reset.css">
<link rel="stylesheet" href="../style/box.css">
<style>
/*
가로, 세로 나란히 배치
가로 가운데, 세로 가운데 배치
container : flex레이아웃의 부모
width: 100%; height:100vh;
justify-content: 가로나열 조정
align_items: 세로나열 조정
item : flex레이아웃의 자식
% 부모너비에 비례
margin 세로의 % 부모의 가로 %
*/
.container {width:100%; height: 100vh;
background-color: pink;
display: flex;
justify-content: center;
/* space-between: item사이 간격을 동일하게 맞춤 */
/* space-evenly: item마다 좌우의 간격이 같음 */
/* space-around: item마다 좌우의 간격이 같음 evenly에 비해 안쪽 간격이 2배*/
/* center: 가로 가운데 배치 */
align-items: center;
/* align-items: center까지 같이하면 가로 세로 가운데 */
}
.item { width: 100px; height: 50px;
background-color: skyblue;
border: 1px solid blue;
}
.container1 {justify-content: flex-start;}
.container2 {justify-content: flex-end;}
.container:3 {justify-content: center;}
.container:4 {justify-content: space-between;}
.container:5 {justify-content: space-evenly;}
.container:6 {justify-content: space-around;}
</style>
</head>
<body>
<h1>justify-content:flex-start</h1>
<div class="container container1">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
<h1>justify-content:flex-end</h1>
<div class="container container2">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
<h1>justify-content:center</h1>
<div class="container container3">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
<h1>justify-content:space-between</h1>
<div class="container container4">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
<h1>justify-content:space-evenly</h1>
<div class="container container5">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
<h1>justify-content:space-around</h1>
<div class="container container6">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
</body>
</html>
현재. container css에서
justify-content: center; 와 align-items: center; 를 지정하여 item 박스가 가로,세로 중앙 배치된 상태이다.
justify-content: flex-start
|
item 박스가 좌측 중앙에 붙어서 나온다. |
justify-content: flex-end
|
item 박스가 우측 중앙에 붙어서 나온다. |
justify-content: center
|
item 박스가 가로,세로 정중앙에 나온다. |
justify-content: space-between
|
item 사이 간격이 동일하게 나온다. (전체 가로길이 기준) |
justify-content: space-evenly
|
item마다 좌우의 간격이 같다. |
justify-content: space-around
|
item마다 좌우의 간격이 같고 evenly에 비해 안쪽 간격이 2배 |
결과 확인
http://justify-content1.netlify.app
'HTML, CSS > Function implementation' 카테고리의 다른 글
[Visual Studio Code] opacity / transition-duration 이용해보기 (0) | 2022.11.02 |
---|---|
[Visual Studio Code] flex-direction (0) | 2022.11.01 |
[Visual Studio Code] scroll-behavior: smooth (0) | 2022.10.29 |
[Visual Studio Code] overflow 사용하기 (0) | 2022.10.29 |
[Visual Studio Code] css 사용하기 / nth-child / nth-of-type (0) | 2022.10.23 |
Comments