1. Flexbox란?
페이지의 콘텐츠 상자 안에 아이템을 배치할때 사용하는것이다.
컨테이너를 만들고 그안에서 배분을 하는것.
예시
<!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>loui3</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>FlexBox</h1>
<section id="container">
<div style="background-color: blue"></div>
<div style="background-color:aqua"></div>
<div style="background-color:aquamarine"></div>
<div style="background-color:blueviolet"></div>
<div style="background-color:brown"></div>
</section>
</body>
</html>app.css 파일
body {
font-family:'Open Sans', sans-serif;
}
h1 {
text-align: center;
}
#container {
background-color: #003311;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003311;
}
#container div {
width: 200px;
height:200px;
}
출력내용
이지만 Flexbox를 이용시 안에 넣을 수 있다.
#container {
background-color: #003311;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003311;
display: flex;
}위와 같이 display: flex를 추가 할경우
위처럼 내부에 들어온다.
2. flex-direcetion 란?
컨테이너 안에서 축을 따라 방향을 결정 할때 쓰인다.
기본값은 flex-direction: row; (좌-우 방향 정렬)이며
축을 반대방향으로 하고 싶을 경우 flex-direction: row-reverse; 이다.(우-좌 방향으로 정렬)
축을 위아래로 하고 싶은 경우 flex-direction: column; (상-하 방향) 이고
마지막으로 하-상 방향으로 축을 하고 싶은경우 flex-direction: colum-reverse; 이다
3. justify-content란?
주축을 기준으로 요소와 컨텐츠들을 배치할때 사용된다.
- justify-content: center; 요소와 컨텐츠들을 중앙으로 옮겨서 사용한다.
- justify-content: space-around; 바깥쪽 여백과 요소 사이에 빈곳이 생긴다.
- justify-content: space-between; 바깥쪽 여백없이 요소 사이에 빈곳이 생긴다. (전체가 균등 하진 않다.)
- justify-content: flex-end; 콘텐츠를 왼쪽으로 정렬한다.
- justify-content: flex-start; 콘텐츠를 오른쪽으로 정렬한다
4. flex-wrap
주축이 수평일때는 새로운 행을 만들어 요소를 정렬하고
수직일때는 새로운 열을 만들어 요소를 정렬할때 사용한다.
5. align-items
요소 한줄을 교차축을 기준으로 요소와 컨텐츠를 배치 할때 사용
6. align-content
align-items은 요소가 한줄이지만 align-items-content는 2줄 이상일때 사용하는것이다.
7. align-self
align-self는 교차축을 기준으로 단일요소의 위치를 바꿀때 사용한다.
8.flex-basis
요소가 배치될때 최소 크기이며 주축의 방향에 따라 너비도 될수 있고 높이가 될 수도 있다.
예시)
#container div {
width:200px;
height: 200px;
text-align: center;
flex-basis: 400px;
}위와 같을때 최초 크기는 400px로 시작한다.
9. flex-grow , flex-shrink
flex-grow는 남은 공간을 요소로 채울때 사용하는 것이고
flex-shrink는 정해진 공간안에 있는 요소의 크기를 작게 보이게 하는것이다.
또한 둘다 단위는 따로 없다.
'WEB > CSS3' 카테고리의 다른 글
| 06-03. CSS Reset (0) | 2023.01.05 |
|---|---|
| 06-02. 미디어 쿼리 (0) | 2023.01.04 |
| 05-02. css 전환 (0) | 2022.12.30 |
| 05-01. css3 테두리와 투명도 (0) | 2022.12.26 |
| 04-01. 레이아웃 (0) | 2022.12.19 |
