Flexbox
(일차원배열) 배치 방향을 설정. 기본정렬 row.
display block 한 줄을 차지하는 요소들 중 너비, 높이를 가질 수 있는 요소들을 좌우로 정렬한다고 했을 때 주로 사용한다.
개념
container : item을 감싸는 부모요소. display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items 등의 속성을 사용할 수 있음
item : order, flex, flex-grow, flex-shrink, flex-basis, align-self등의 속성을 사용할 수 있음
예시 html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="index.css">
<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>
</head>
<body>
<div class="flex-container">
<div class="flex-item">A</div>
<div class="flex-item">B</div>
<div class="flex-item">C</div>
</div>
</body>
<script>
console.log('스크립트')
</script>
</html>
flex-grow
- 할당 가능한 공간의 정도
- 형제 아이템들이 모두 동일한 flex-grow(공간)값을 갖음
- 형제 아이템들이 다른 경우
ex) 3개의 div 중 첫 번째 값만 flex-grow : 2; 나머지 값이 flex-grow : 1을 가질 경우
첫 번째 값이 2번째 혹은 3번째 div의 2배의 영역을 차지한다.
.flex-container {
display: flex;
background-color: antiquewhite;
padding: 10px;
}
.flex-item {
background-color: red;
border: 1px solid black;
flex-grow: 1;
width: 150px;
}
.flex-item:nth-child(1) {
flex-grow: 2;
}
flex-shrink
- 아이템의 크기가 container보다 클 때 사용
- 설정된 값에 따라 크기가 축소
- flex-shrink : 0 = 줄어들지 않겠다.
.flex-container {
display: flex;
background-color: antiquewhite;
padding: 10px;
width: 300px;
}
.flex-item {
background-color: red;
border: 1px solid black;
flex-grow: 1;
width: 150px;
}
/*container 크기 300px에 맞게 flex-item이 줄어듬*/
.flex-item {
background-color: red;
border: 1px solid black;
flex-grow: 1;
width: 150px;
flex-shrink: 0;
}
/*container 영역을 벗어나더라도 150px을 유지함*/
flex-basis
- 아이템의 초기 크기
- 상하 정렬일 경우 높이값
- 좌우 정렬일 경우 너비값
- 'auto가 아니라명 width, height 보다 flex-basis가 우선
+) reverse 속성
flex-direction : column-reverse 아래부터 배치함
한꺼번에 표현하기
flex : flex-grow flex-shrink flex-basis 형태로 사용할 수 있다.
flex: 1 0 100px
**inline flex와 flex 차이
flex : 컨테이너가 수직으로 쌓임 (Block 특성)
inline-flex : 컨테이너가 수평으로 쌓임 (Inline 특성)
축
기본축 (Main Axis) :요소를 정렬하는 축
교차축 (Cross Axis) : 기본축에 수직인 방향
justify-content : 기본축 기준으로 정렬
space-around : 요소들 사이에 모두 같은 간격의 공간이 생김
space-between : 요소를 양끝에 배치하고 사이에 동일한 간격으로 배치
align-items : 교차축을 기준으로 정렬
요소가 넘칠 때
flex-wrap : 기본축 정렬 요소가 넘칠때 교차축 정렬으로 넘어가서 배치
flex-grow : 얼마나 늘릴지를 설정. 요소를 늘려서 빈 공간을 꽉채우고 싶을 때. 숫자에 비례해 늘어남.
flex-shrink : 얼마나 줄일지를 설정. 값이 클수록 더 많이 줄어듬
*빈공간을 채우고 싶을 때 flex-grow:1, 요소의 크기를 고정하고 싶을 때 flex-shrink:0
flex-basis : 플렉스 아이템의 초기 크기를 지정
gap : 세로, 가로 (margin 순서랑 같음)
'css' 카테고리의 다른 글
| [CSS] Grid (0) | 2023.04.23 |
|---|---|
| [CSS] display (0) | 2023.04.22 |
| [CSS] position (0) | 2023.03.16 |
| HTML와 CSS (0) | 2023.02.27 |