상추의 IT저장소
CSS) flexbox - flex 아이템에 적용하는 속성들 본문
flexbox란?
flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.
flexbox를 만드는 방법은 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다.
.flex_container {
display: flex;
}부모 요소와 자식 요소에 정의하는 속성 구분
flexbox에서 사용하는 속성은 부모 요소인 flex container에 정의하는 속성과 자식 요소인 flex item에 정의하는 속성으로 나누어진다. 전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의하고, 자식 요소의 크기나 순서에 관련된 속성은 flex item에 정의한다. 이를 분리해 적용하는 것이 중요하다.
- flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
- flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order
Flex 아이템에 적용하는 속성들
flex-basis
- flex-basis는 Flex 아이템이 기본 크기를 설정한다. flex-direction이 row일 때는 너비, column일 때는 높이를 바꿔준다.
- flex-basis의 값으로는 우리가 width, height 등에 사용하는 각종 단위의 수가 들어간다. (auto, px, %, rem, content)
<!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>flexbox</title>
<style>
.container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: aquamarine;
}
.item{
display: flex;
justify-content: center;
align-items: center;
margin: 10px 10px 10px 10px ;
font-size: 30px;
font-weight: bold;
color: white;
background-color: red;
flex-basis : 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">AAA</div>
<div class="item">BBBBBBBBBBBBBBBB</div>
<div class="item">CCCCCCCCC</div>
</div>
</body>
</html>
- flex-basis 를 100px로 주면 width가 100px가 되지 않는 AAA는 100px로 늘어났지만, BBBB와 CCCC는 그대로 유지된다.
flex-grow
- flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다.
- flex-grow에는 숫자값이 들어간다. 몇이든 0보다 큰 값이 세팅되면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커지며 빈공간을 메운다.
-flex-grow : 1;
- flex-grow에 들어가는 숫자는 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율이다.
- flex-grow를 1:2:1 로 설정한 경우
flex-shrink
- flex-shrink는 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다.
- flex-shrink도 숫자값이 들어가며, 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한 박스로 변하고 flex-basis보다 작아진다.
- 기본값이 1이며, flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않는다.
.item:nth-child(1) {
flex-shrink: 0;
width: 100px;
}
.item:nth-child(2) {
flex-grow: 1;
}
- 컨테이너의 폭을 100%였을때와 줄였을때, 첫번째 요소에 flex-shrink : 0; 을 설정하여 컨테이너가 아무리 작아져도 첫번째 아이템은 줄어들지 않고 100px로 유지된다.
flex
- flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성.
- 이 세 속성들은 서로 관련이 깊기 때문에 축약형을 많이 쓴다.
- 사용법
.item {
flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex: 1 500px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}
- 축양형 flex 예시
.item {
flex: 1 1 0;
}
.item:nth-child(2) {
flex: 2 1 0;
}
- flex-basis: 0; 으로 기본 점유 크기를 0으로 만들고 전체크기를 1:2:1로 나누어 가져서, 영역 자체의 크기가 1:2:1의 비율로 설정되었다.
- 여백의 비율이 아니고, 영역 자체의 비율로 분할하기는 flex-basis를 0으로 하면 쉽게 처리 할 수 있다.
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 40%;
}
- flex-basis가 40%면, 100%에는 2개까지만 들어갈 수 있어 하나의 row에는 2개만 남고 다음줄로 넘어가서 2단 컬럼이 만들어진다.
align-self
- align-items의 아이템 버전으로 align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬이다.
- 기본값은 auto로, 기본적으로 align-items 설정을 상속 받는다.
.item:nth-child(1) {
align-self: auto;
}
.item:nth-child(2) {
align-self: stretch;
}
.item:nth-child(3) {
align-self: flex-start;
}
.item:nth-child(4) {
align-self: flex-end;;
}
.item:nth-child(5) {
align-self: center;
}
.item:nth-child(6) {
align-self: baseline;
}
참조 : https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
'CSS' 카테고리의 다른 글
| CSS)Flex에서 Gap (0) | 2024.09.23 |
|---|---|
| CSS) Grid 레이아웃 (0) | 2023.01.24 |
| CSS) font-face 사용하기 (0) | 2022.12.20 |
| CSS) flexbox - flexcontainer에 적용되는 속성 (0) | 2022.11.10 |
| CSS) 선택자 (0) | 2022.11.05 |
