flex 정리
- flex-basis
flex에서 아이템의 초기 크기를 지정한다.
flex-grow나 shrink로 늘어나거나 줄어들기 전의 기본 크기를 설정합니다.
- flex-grow
아이템의 기본값 이상으로 넓어질 수 있는 값을 설정한다. 1만 줬어도 화면을 꽉 채운다.
1이상의 값으로 아이템 늘어나는 비율을 설정할 수 있다.
아이템이 여러개일 경우 전체의 얼만큼 비율을 차지할지 각각 설정할 수 있다.
- flex-shrink
아이템의 기본값보다 화면이 작아지면 해당아이템 width값이 줄어든다. 1만 줘도 줄어든다.
flex-basis, flex-grow, flex-shrink의 값이 auto가 아닌 경우, width값과 동시에 적용했을 때 flex-basis, flex-grow, flex-shrink가 우선적으로 적용된다.
- flex
- 축약해서 사용할 수 있다. flex-grow, flex-shrink, flex-basis 순으로 작성된다.
<html>
<head>
<title>flex</title>
<style>
.items {
display: flex;
}
.item {
width: 50px;
flex: 1 1 50%;
/*flex-grow: 1, flex-shrink: 1, flex-basis: 50% */
}
</style>
</head>
<body>
<section class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</section>
</body>
</html>
flex: 1 1 50%;
flex-wrap: wrap이 있을 경우에는 shrink는 적용되지 않는다.
화면이 작아지면서 아이템이 아래로 내려가기 때문이다.
100% 는 부모의 넓이 전체
100vw 전체 화면 가로 넓이
- position: fixed 로 하면 %로 해도 부모 길이에 영향을 받지는 않는다.
회고🔨🔨🔨
플렉스가 손에 읽어서 잘 알고 있다고 생각했는데 다시 정리하면서 내가 자주 사용했던
속성을 알고 있던 것이고 사용이 적었던 것들을 알고 있는 줄 알았는데
해보면서 내가 제대로 알고 있던게 아니라는걸 알게 되었다.
정리하면서 다시 한번 되돌아보게 되는 시간을 갖게 된다.
개념을 확실히 설명할 수 있도록 복습해야겠다.
