flex에 대해서는 좀 깊게 알아 볼 필요가 있다.
inline-block이나 float를 이용해서 레이아웃을 구성할 수 도 있겠지만 레이아웃을 구성하기 위해 나온 속성이 flex와 grid는 다른 어떠한 속성들보다도 편할 수 있기 때문이다.
flex는 레이아웃을 구성하고 싶은 아이템들이 내부에 있는 부모요소에 적용을 시켜줘야 된다.
Block 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 한다.
이때 부모를 Flex-container, 영향을 받는 자식들을 Flex-item이라고 부른다.
flex는 자신의 직계자식까지만 영향을 미친다는 것에 주의하도록 하자. 자손에게는 영향을 주지 않는다는 것을 기억하자
flex로 컨테이너는 가로를 모두 차지하며, 높이는 아이템들만큼 자동으로 맞춰지며 사용자가 높이를 설정할 수 도 있다.
그래서 컨테이너에 높이를 주지 않으면 세로정렬을 일어나지 않는다. 꼭 컨테이너의 높이를 설정해주도록 하자
display flex 과 inline-flex의 차이
일반적인 block레벨요소와 inline-block요소와의 차이와 동일하다.
flex의 컨테이너는 가로 한 공간을 다 차지 하기 때문에 주축에 대한 정렬이 가능하며, inline-flex는 딱 아이템들이 차지하는 공간만큼 가로 너비가 정해진다.
하지만 주의 해야 될 점은 아이템들의 배치가 아닌 아이템을 깜싸고 있는 컨테이너의 배치가 가로 한공간을 차지하면서 세로로 진행되냐 아니면 inline처럼 가로로 진행되냐의 차이인 것이다.
FLEX 컨테이너에 하는 속성
flex-direction
아이템들의 진행방향을 결정하는 속성 / flex속성값을 부여받는 컨테이너가 사용할 주축과 정렬 방향을 결정하는 속성
justify-content(주축 기준)
주축(Axis)을 기준으로 배열의 위치를 조종하거나 아이템 간의 간격을 설정할 수 있다.
align-items(교차축 기준)
교차축을 기준으로 위치를 조종하거나 아이템 간의 간격을 설정할 수 있다.
align-items의 속성값
stretch기본값 컨테이너의 높이따라 아이템들의 별다른 높이가 지정되어 있지 않다면 각각의 아이템들은 모두 높이를 가지게 된다.
flex-start는 아이텀들이 차지하는 높이에 따라 flex-direction이 row인 경우 위, column인 경우 왼쪽으로 딱 붙여서 정렬시켜준다.
flex-end는 start와 반대로 정렬이 된다.
center 부모의 높이가 설정되어있지 않은 경우에는 가운데 정렬이 일어나지 않기 때문에 유의하도록 하자
wrap 사용이유?
flex의 컨테이너의 넓이의 합이 컨테이너보다 크다고 해서 강제로 flex-item의 넓이를 조절하지 않는다.
그래서 wrap의 기능을 사용해야 된다.
만약 컨테이너의 높이가 주어지지 않은 경우네는 딱 아이템들의 알맞은 높이 만큼 컨테이너의 높이가 설정된다. strech의속성이 기본값이기 때문이다. 하지만 컨테이너의 높이가 주어진 경우에는 어떻게 되는 지 확인 해도보록 하자
아이템들이 wrap이 되어서 줄바꿈이 되었는데 컨테이너의 높이가 작은 경우
높이를 넘어가게 된다. 그래서 아이템이 또 다시 세로로 삐져나가는 현상이 발생하게 된다.
컨테이너의 높이가 높은 경우
align-items의 stretch의 부모의 높이를 모두 가질려는 속성값 때문에 빈 공간만큼 알아서 정렬되서 나오게 된다. 이런 경우 이제 align-content속성을 활용해서 정렬을 이용하도록하자
align-content는 flex 컨테이너가 wrap속성을 가지고 있어 아이템들이 두줄이상으로 배치가 된 경우에 사용이 가능한 속성이다.
속성값들은 justify-content와 동일하다.
예제코드로 확인 해보자
<!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></title>
<style>
.container {
height: 300px;
border: solid black 5px;
display: flex;
flex-flow: wrap row;
/* flex-wrap: wrap; flex-direction: column; 과 동일합니다. */
/* 위에 코드로 작성하면 stretch속성값 때문에 빈공간이 발생되면서 정렬 이런 경우에는 align-content를 이용 */
align-content: flex-start;
}
.box {
border: solid black 5px;
height: 50px;
width: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<div class="box">box6</div>
<div class="box">box6</div>
<div class="box">box6</div>
<div class="box">box6</div>
<div class="box">box6</div>
<div class="box">box6</div>
<div class="box">box6</div>
<div class="box">box6</div>
<div class="box">box6</div>
<div class="box">box6</div>
<div class="box">box6</div>
</div>
</body>
</html>
flex-wrap속성
wrap 컨테이너의 너비를 넘어가게 되는 경우 자리지 않도록 아래에 배치하도록 한다.
no-wrap 켄테이너의 너비의 상관없이 배치가 되며 너비를 넘어가게 될 경우 삐져나가게 된다.
flex-flow속성
flex-direction과 flex-wrap을 같이 사용하는 일이 빈번하기 때문에 단축하여 사용할 수 있게 해주는 속성이다.
사용 예시) flex-flow: wrap row;
FLEX item에 사용하는 속성
width와 height를 지정해서 item의 크기를 결정하는 것은 내부의 컨텐츠에 따라서 유동적이지 못하다. 그래서 텍스트가 길어지게 되면 밖으로 삐져나가는 현상이 발생해 다른 텍스트와 겹치는 모습을 볼 수 있다. 이런 문제를 유동적으로 해결하기 위해 flex-basis로 값을 지정해주게 된다.
flex-basis는 일반적으로 em, px등 width와 height에서 사용하는 속성값의 단위를 사용할 수 있고
만약 width와 height와 같이 적용이 되어 있는 경우 flex-basis값은 무시된다.(교안에는 반대로 나와 있어 헷갈린 부분이다.)
flex-basis는 길이적용은 flex-direction에 따라서 flex-basis가 높이, 너비가 된다.
row 너비 column 높이라는 것을 꼭 기억하자
그래서 유연한 박스를 사용하기 위해서는 텍스트를 단어단위로 줄바꿈을 시키는 word-wrap:break-word;과 flex-basis를 적절하게 사용해서 구현해야 된다.
'Programming > Style' 카테고리의 다른 글
| CSS float (0) | 2022.09.19 |
|---|---|
| CSS position (0) | 2022.09.19 |
| CSS line-height (0) | 2022.09.17 |
| CSS Display속성 (0) | 2022.09.15 |
| CSS 선택자(Selector) (0) | 2022.09.08 |