너무너무 헷갈리는 Flex 어떻게 사용해야 할까??
기본 코드는 container라는 부모요소를 만들고 안에 자식요소로 3개의 class를 만들어 border에 색상을 주었다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
display: flex;
border: 15px solid rebeccapurple;
margin: 10px;
}
.one{
border: 15px solid salmon;
}
.two{
border: 15px solid cornflowerblue;
}
.three{
border: 15px solid tomato;
}
</style>
</head>
<body>
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
</body>
display: flex;
이제 여기서 container(부모)에게 display를 flex로 하면?
-----> 이렇게 되는 이유는 flex의 기본값이 있기 떄문이다.
- flex-direction: row 로 기본값이 들어가 있기 때문에 옆으로 수평으로 배치가 된다.
- align-items: stretch 각각의 아이템의 높이가 똑같아진다.
그럼 column과 row에 따라서 이후에 나오는 속성들이 다르게 동작하기 떄문에 두가지를 비교해보자!
display가 flex일때 사용할 수 있는 여러 속성들 중에 아주 중요한게 flex-direction 이다.
- flex-direction: row : 하나의 행에 자식들을 수평으로 배치한다.
- flex-direction: column : 하나의 열에 자식들을 수직으로 배치한다.
우리가 flex를 사용하는 이유는 content를 배치하기 위해서이다.
justify-content를 사용해서 정렬을 할 수 있다.
.container{
display: flex;
justify-content: end;
height: 300px;
border: 15px solid rebeccapurple;
margin: 10px;
}
justify-content: end로 준다면?
이렇게 row일때는 메인이 되는 축(주축)이 수평이고, column일때는 메인이 되는 축(주축)이 수직이 되는 것이다.
그리고 교차되는 방향을 교차축이라고 한다. 여기서 justify-content는 주축의 배치를 결정하는 속성이다.
그리고 각각의 자식들을 적당한 간격으로 떨어뜨리고 싶을때 사용하는 옵션중 justify-content: space-around로 주게 되면
이런식으로 1:1로 간격이 생긴다. 추가적으로 간격을 넣는 속성은 space-between, space-evenly가 있다.
그러면, 주축이 아니라 교차축 방향으로 사용하고 싶다면?
align-items: stretch 라는 교차축 방향으로 쭉 늘어나는 속성이 기본적으로 들어가 있기 때문에 화면에 전체적으로 들어간다.
교차축 방향으로 content를 자신의 부피만큼 위치하게하고 싶으면 align-items: start로 바꾸면 아래 처럼 늘어나지 않고, content의 크기만큼 변했다.
교차축을 end로 바꾸면??
교차축과 주축을 가운데로 잡는다면?
justify-content: center;
align-items: center;
- 주축은 justify-content
- 교차축은 align-items
각각의 자식 element의 주축방향을 지정하려면 어떻게 해야할까? row의 주축은 폭이고 column은 높이가 주축이겠죠??
주축을 지정하는 방법은 flex-basis 이며, 자식요소에 각각 지정할 수 있다.
그런데 화면의 크기에 상관없이 여백을 없애고 싶다면?? 그럴때는 flex-grow 여백만큼 커지는 정책을 지정할 수 있다.
자식요소에 flex-grow 에 값을 할당하면 1 : 2 : 3의 비율 만큼 크기가 달라진다.
.one{
border: 15px solid salmon;
/* flex-basis: 30px; */
flex-grow: 1;
}
.two{
border: 15px solid cornflowerblue;
/* flex-basis: 60px; */
flex-grow: 2;
}
.three{
border: 15px solid tomato;
/* flex-basis: 90px; */
flex-grow: 3;
}
그럼 flex-basis와 flex-grow를 같이 사용하면 어떻게 될까?
.one{
border: 15px solid salmon;
flex-basis: 30px;
flex-grow: 0;
}
.two{
border: 15px solid cornflowerblue;
flex-basis: 60px;
flex-grow: 0;
}
.three{
border: 15px solid tomato;
flex-basis: 90px;
flex-grow: 1;
}
기본적으로 flex-grow: 0이고 이렇게 마지막에만 1을 준다면, 나머지 여백을 마지막이 다 가져가라는 뜻이 된다.
아래처럼 마지막이 여벽을 다 가져가서 첫번째와 두번째는 화면을 늘려도 변화가 없다.
기본적으로 grow는 여백이 풍부할때 분배하는 정책이고, 그렇다면 여백이 부족할 경우는 어떻게 될까?
여백이 부족할 경우에는 어떻게 각출을 시켜야 할까? 나머지는 가만히 있고, 마지막에서만 여백을 각출해달라고 할 경우에는
flex-shrink의 기본 값은 1이고, 첫번째, 두번째에 각각 0을 넣으면 자신의 크기를 유지하라는 뜻이다.
.one{
border: 15px solid salmon;
flex-basis: 50px;
/* flex-grow: 1; */
flex-shrink: 0;
}
.two{
border: 15px solid cornflowerblue;
flex-basis: 100px;
/* flex-grow: 0; */
flex-shrink: 0;
}
.three{
border: 15px solid tomato;
flex-basis: 400px;
/* flex-grow: 1; */
flex-shrink: 1;
}- flex-basis : 기본적인 크기를 결정한다.
- flex-grow: 남는 여백을 어떻게 분배할 것인가를 결정한다.
- flex-shrink: 부족한 여백을 어떻게 각출할 것인가를 결정한다.
마지막으로, 화면이 부족하다면 줄 바꿈이 되게하고 싶다면, flex-wrap을 부모요소에 주면 아래와 같이 줄바꿈이 되면서 화면이 작아지면 아래로 줄바꿈이 된다. 만약 주축방향에 공간이 부족하다면, 교차축 방향으로 새로운 축이 하나 생긴다. 기본값은 flex-wrap: no-wrap이다.
참고자료
'Web' 카테고리의 다른 글
| 암호화와 보안: 데이터 보호의 첫걸음 (0) | 2024.12.13 |
|---|---|
| JavaScript 자료 구조와 메모리 관리 (3) | 2024.11.15 |
| 웹 표준과 웹 접근성이란? (8) | 2024.10.29 |
