개인프로젝트 하면서 UI 제작 하는게 제일 힘들다고 느낀다. 자유로운 커스텀을 위해 부트스트랩 같은 라이브러리를 사용하지 않고 html, css만 사용중인데 학원에서 grid를 배워서 사용하다가 flex 라는 것이 있어서 사용하는데 이것도 따로 정리해두면 좋을것 같아 글을 쓴다.
(카테고리는 그냥 JavaScript 쪽에 넣었다)
참고
https://developer.mozilla.org/ko/docs/Web/CSS/flex
flex - CSS: Cascading Style Sheets | MDN
flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니
developer.mozilla.org
처음 페이지를 들어가면 css flex에 대해 설명을 해준다.
display : flex;
하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성. 각 요소 간의 공간배치를 유연하게 다룰 수 있다.
내가 구성하고 싶은 배치 요소에 대해 자유롭게 구역을 나눠준다는건가? 일단 한번 사용해보자.
부모 요소인 myFlex 클래스에 flex를 지정하고 자식 4개를 넣어봤다.
<!DOCTYPE html>
<head>
<title>Flex</title>
</head>
<style>
.myFlexRow {
display: flex;
}
.myFlexRow2 {
display: flex;
flex-wrap: wrap;
}
.myFlexColumn {
display: flex;
flex-direction: column;
}
.testTag1 {
background-color: rgb(0, 243, 41);
height: 80px;
}
.testTag2 {
background-color: rgb(95, 95, 95);
}
.testTag3 {
background-color: rgb(209, 159, 101);
}
.testTag4 {
background-color: rgb(243, 18, 232);
}
.testTag5 {
background-color: rgb(73, 83, 224);
}
.testTag6 {
background-color: rgb(141, 105, 6);
}
.testTag7 {
background-color: rgb(239, 243, 18);
}
.testTag8 {
background-color: rgb(214, 11, 38);
}
.testTag9 {
background-color: rgb(102, 11, 187);
}
.testTag10 {
background-color: rgb(16, 15, 17);
color: white;
}
</style>
<body>
<div class="myFlexRow">
<div class="testTag1">1 얘만 height: 80px 로 설정했음</div>
<div class="testTag2">2 헐</div>
<div class="testTag3">3 UI 어렵다</div>
<div class="testTag4">4 난 백엔드가 좋아~~</div>
<div class="testTag5">5 자식 숫자가 많아야</div>
<div class="testTag6">6 flex-wrap 차이 볼 수 있음</div>
<div class="testTag7">7 ~~~</div>
<div class="testTag8">8 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ</div>
<div class="testTag9">9 ㅎㅎㅎㅎㅎ</div>
<div class="testTag10">10 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</div>
</div>
<hr>
<div class="myFlexRow2">
<div class="testTag1">1 얘만 height: 80px 로 설정했음</div>
<div class="testTag2">2 헐</div>
<div class="testTag3">3 UI 어렵다</div>
<div class="testTag4">4 난 백엔드가 좋아~~</div>
<div class="testTag5">5 자식 숫자가 많아야</div>
<div class="testTag6">6 flex-wrap 차이 볼 수 있음</div>
<div class="testTag7">7 ~~~</div>
<div class="testTag8">8 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ</div>
<div class="testTag9">9 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ</div>
<div class="testTag10">10 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</div>
</div>
<hr>
<div class="myFlexColumn">
<div class="testTag1">1 얘만 height: 80px</div>
<div class="testTag2">2 헐</div>
<div class="testTag3">3 UI 어렵다</div>
<div class="testTag4">4 난 백엔드가 좋아~~</div>
<div class="testTag5">5 자식 숫자가 많아야</div>
<div class="testTag6">6 flex-wrap 차이 볼 수 있음</div>
<div class="testTag7">7 ~~~</div>
<div class="testTag8">8 ㅇㅇㅇㅇ</div>
<div class="testTag9">9 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ</div>
<div class="testTag10">10 ㅋㅋㅋ</div>
</div>
</body>
</html>
Elements에 있는 속성들을 하나씩 알아보자.
● flex-direction
Flexbox 컨테이너 안에서 아이템들이 배치되는 주축(main axis)을 결정한다. 아이템들을 가로로 나열할지(row), 세로로 나열할지(column), 혹은 반대 방향으로 나열할지(row-reverse 또는 column-reverse) 설정한다.
본인이 가로, 세로를 정해서 사용하면 된다.
● flex-wrap
Flex 컨테이너 안에 있는 아이템들이 한 줄(no wrap)에 모두 배치되어야 할지, 여러 줄(wrap)에 나눠서 배치되어야 할지를 결정한다.
flex-wrap : wrap; 으로 설정한 두 번째의 경우 자식의 숫자가 많아지니 다음줄로 내려온 것을 볼 수 있다.
● align-content
여러 줄로 나눠진 Flex 컨테이너의 교차 축(cross axis)에서 아이템들의 정렬을 설정한다.
● justify-content
주축(main axis)에서 아이템들을 정렬하는 방법을 설정한다.
● align-items
교차 축(cross axis)에서 아이템들을 정렬하는 방법을 설정한다.
justify-content가 수직 관련된 정렬이고 align-content ,algin-items 2개가 수평 관련된 정렬인데 둘이 무슨 차이일까? 밑에는 이것에 대한 설명인데 아직 와닿지는 않는다.
align-content와 align-items는 둘 다 Flexbox에서 아이템들을 교차 축(cross axis)에서 정렬하는데 사용되는 속성들이다. 그러나 이 두 속성 간에는 몇 가지 중요한 차이가 있다.
ㆍalign-content
다중 행에 영향을 미침.
align-content는 여러 행(flex-wrap: wrap;)으로 나눠진 Flex 컨테이너에 적용된다. 이것은 여러 행 간의 간격을 조절하고, 컨테이너 전체의 교차 축에서 아이템들의 배치를 조절한다.
flex-start: 여러 행을 교차 축의 시작 부분에 정렬한다.
flex-end: 여러 행을 교차 축의 끝 부분에 정렬한다.
center: 여러 행을 교차 축의 가운데에 정렬한다.
space-between: 여러 행을 균등한 간격으로 정렬한다.
space-around: 여러 행을 아이템 주위에 균등한 간격으로 정렬한다.
stretch: 여러 행을 교차 축에 맞게 늘립니다.
ㆍalign-items
단일 행에 영향을 미침.
align-items는 단일 행 레이아웃(flex-wrap: nowrap;)에 적용되며, 교차 축에서 아이템들을 정렬한다. 모든 아이템에게 일괄적으로 적용된다.
stretch: 아이템을 교차 축에 맞게 늘립니다.
flex-start: 아이템을 교차 축의 시작 부분에 정렬한다.
flex-end: 아이템을 교차 축의 끝 부분에 정렬한다.
center: 아이템을 교차 축의 가운데에 정렬한다.
baseline: 아이템을 기준선에 정렬한다.
align-content는 여러 행이 있는 경우에 사용되며, 여러 행 간의 간격 및 배치를 다룬다.
align-items는 단일 행 레이아웃에서 사용되며, 교차 축에서 아이템들을 정렬한다.
그렇다고 한다. 내가 예시로 구성한 코드에서는 items만 반응하고 content는 반응이 없어서 차이점에 대해서 나중에 확실히 이해되면 추가하겠다. 내가 기본적으로 사용한건 가로 세로에 따라 정렬값만 활용하였다.
flex 자체도 border 처럼 값이 축약되어 쓰이는데 다음과 같다.
flex-grow, flex-shrink, flex-basis 3개의 속성들의 값을 지정할 수 있다.
● flex-grow
아이템이 남은 공간을 얼마나 차지할지를 결정한다. 이 값은 양수이며, 아이템이 차지하는 공간의 상대적인 비율을 나타낸다. 아이템 간에 flex-grow 값이 다르면, 큰 값의 아이템이 남은 공간을 더 많이 차지한다.
● flex-shrink
아이템이 부모 컨테이너보다 작을 때, 얼마나 축소되어야 하는지를 결정한다. 이 값도 양수이며, 아이템이 차지하는 공간의 상대적인 비율을 나타낸다. flex-shrink 값이 크면 해당 아이템은 다른 아이템보다 빠르게 축소된다.
● flex-basis
아이템의 초기 크기를 설정한다. 이 값은 기본 크기를 나타내며, 해당 아이템이 flex-grow 및 flex-shrink에 따라 어떻게 확장 또는 축소될지의 기준이 된다.
flex-basis 값은 길이 단위(픽셀, 백분율 등)로 지정하거나 auto로 설정할 수 있다. auto로 설정하면 아이템은 자체 크기를 유지하며, 남은 공간은 flex-grow 및 flex-shrink에 따라 분배된다.
flex 속성은 한 개에서 세 개의 값을 사용해 지정할 수 있다.
● 값이 한 개일 때, 그 값은 다음 중 하나여야 한다.
ㆍ <number>를 지정하면 <flex-grow>이다.
예시)
flex: 2; /* flex-grow: 2; flex-shrink: 1; flex-basis: 0%; */
ㆍ <length> 또는 <percentage>를 지정하면 <flex-basis>이다.
예시)
flex: 200; /* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
flex: 50%; /* flex-grow: 1; flex-shrink: 1; flex-basis: 50%; */
ㆍ none, auto, initial 중 하나를 지정할 수 있다.
flex: none;
flex-grow: 0; 와 동일하며, 아이템이 부모 컨테이너 내에서 공간을 확장하지 않도록 한다. flex-shrink와 flex-basis의 값은 무시된다.
flex: auto;
flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 와 동일하다. 아이템이 남은 공간을 골고루 차지하며, 크기를 유연하게 조절한다.
flex: initial;
flex: 0 1 auto; 와 동일하다. 아이템이 초기 크기를 유지하면서, 필요에 따라 축소될 수 있다.
● 값이 두 개일때, 첫 번째 값은 <number>여야 하며 <flex-grow>가 된다. 두 번째 값은 다음 중 하나여야 한다.
ㆍ <number>를 지정하면 <flex-shrink>이다.
예시)
flex: 2 1; /* flex-grow: 2; flex-shrink: 1; flex-basis: 0%; */
ㆍ <length>, <percentage>, 또는 auto를 지정하면 <flex-basis>이다.
예시)
flex: 2 200px; /* flex-grow: 2; flex-shrink: 1; flex-basis: 200px; */
flex: 2 auto; /* flex-grow: 2; flex-shrink: 1; flex-basis: auto; */
● 값이 세 개일 때는 다음 순서를 따라야 한다.
ㆍ <flex-grow> 에 사용할 <number>
ㆍ <flex-shrink> 에 사용할 <number>
ㆍ <flex-basis> 에 사용할 <length>, <percentage>, 또는 auto
예시)
flex: 2 1 200px; /* flex-grow: 2; flex-shrink: 1; flex-basis: 200px; */
음... 모를때 마다 와서 봐야겠다 ㅎㅎ;
'99. etc (분류 애매, 작성중)' 카테고리의 다른 글
| [MyBatis]CDATA (0) | 2023.12.12 |
|---|---|
| BEM 방법론 (0) | 2023.12.05 |
| 01. 자료구조 (0) | 2023.11.25 |
| NaN (Not A Number) (0) | 2023.11.23 |
| 이진법 (binary) (0) | 2023.11.23 |
