CSS 플렉스 박스 레이아웃 (flexible box layout) -item 속성

지나·2022년 7월 19일
CSSlayout
0
post-thumbnail

플렉스 박스 레이아웃 (flex box layout)

수직 또는 수평을 주축으로 하여 flex item 들을 flex container 에 자유롭게 배치하여 레이아웃을 만든다. 명확하게 정해져 있지 않던 수평 구성 레이아웃을 만들 수 있게 하고, 수직 구성 레이아웃 또한 어려움 없이 만들 수 있게 한다.

<style>
	.container {
    	display: flex;}
    .item {
    	flex: 1;}
</style>


<html>
...
<div class="container">
	<div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
</div>
...
</html>

위 코드는 플렉스 박스 레이아웃을 사용할 때의 일반적인 구조를 의미한다.
여러개의 요소를 자식으로 두고 있는 부모 요소에 display: flex; 스타일을 적용시키게 되면 부모 요소는 flex container 가 되고, 자식 요소들은 flex item 이 된다.

각각 적용시키는 속성이 분류되기 때문에 컨테이너인 부모 요소와, 아이템인 자식 요소를 구분하여 해당 요소에 맞는 속성을 적용시키는 것이 중요하다.


flex box 의 구조

flex box 는 플렉스 아이템 flex item 들을 감싸는 플렉스 컨테이너 flex container 와, 수평방향인 주축 (main axis) 과 주축 시작점 (main start) , 주축 끝점 (main end) 그리고 수직방향인 교차축 (cross axis) 과 교차축 시작점 (cross start) , 교차축 끝점 (cross end) 로 구성된다.


flex container 의 속성

컨테이너에 적용할 수 있는 속성은 총 7개이다.
각 컨테이너 속성에 대한 설명은 이전 게시글에 정리되어있다.


속성설명
display컨테이너를 block 또는 inline 레벨로 정의
flex-flowflex-direction 과 flex-wrap 의 단축형 속성
flex-direction아이템의 주축을 지정
flex-wrap줄바꿈 지정
justify-content주축 기준으로 아이템 정렬 방식 지정
align-items (1줄)교차축 기준으로 아이템 정렬 방식 지정
align-content (2줄)교차축 기준으로 아이템 정렬 방식 지정

flex item 의 속성

아이템에 적용할 수 있는 속성은 총 7개이다.


속성설명
order아이템의 배치순서 (시각적 나열 순서) 를 결정
flexflex-basis flex-grow flex-shrink 의 단축형 속성
flex-grow아이템의 증가 너비 비율을 지정
flex-shirink아이템의 감소 너비 비율을 지정
flex-basis아이템의 기본 너비를 지정
align-self교차축 기준으로 아이템 정렬 방식 지정 (개별 지정)


🍒 order

<style>
	.container {
    	display: flex;}
	.item1 {
    	order: 8;}
	.item2 {
    	order: -2;}
	.item3 {
    	order: 0;}
	.item4 {
    	order: 14;}
	.item5 {
    	order: -4;}
	.item6 {
    	order: 5;}
	div {
    	order: 1px solid black;
  		padding: 10px;
  		margin: 10px;}
</style>


<div class="container">
  <div class="item1">order:8</div>
  <div class="item2">order:-2</div>
  <div class="item3">order:0</div>
  <div class="item4">order:14</div>
  <div class="item5">order:-4</div>
  <div class="item6">order:5</div>
</div>

flex item 의 배치순서를 지정하는 속성이다.

속성값으로는 음수 0 양수 모두 사용 가능하며 기본값은 0 이다.

아이템의 배치순서를 지정하는 속성인 order 의 순서는 시각적 나열 순서일 뿐, html 자체의 구조를 정하는 것은 아니므로 우선순위와 착각하지 않도록 유의해야 한다.

시각 장애인을 위한 스크린 리더로 화면을 읽을 때 order 속성으로 지정한 순서는 의미가 없다는 것을 말한다.



🍒 flex

<style>
	.container {
        display: flex;
    .item {
    	flex: flex-grow flex-shrink flex-basis;}
</style>


<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>

플렉스 아이템의 증가너비 속성인 flex-grow 값, 감소너비 속성인 flex-shirink 값, 기본너비 flex-basis 값을 한번에 지정할 수 있는 단축형 속성이다.

증가너비, 감소너비, 기본너비를 순서대로 명시한다.

증가너비 flex-grow 값은 반드시 명시해야한다.
감소너비 flex-shrink 값을 생략하면 기본값인 1 이 적용된다.
기본너비 flex-basis 값을 생략하면 기본값인 auto 가 아닌 0 이 적용된다.



🍒 flex-grow

<style>
	.container {
        display: flex;
    .item {
    	flex-grow: 증가너비값;}
</style>


<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>

flex item 의 증가너비 비율을 지정하는 속성이다.

기본값은 0 이고, 숫자가 클수록 너비가 증가한다.

증가너비 비율인 flex-grow 값이 0 인 경우, 플렉스 아이템은 기존의 컨텐츠 너비만큼 또는 설정된 기본 너비 flex-basis 와 동일한 너비값을 가진다.
증가너비 비율인 flex-grow 값이 0 보다 큰 경우, 플렉스 아이템은 지정된 증가너비 비율에 맞춰 유연하게 늘어난다.

flex-grow 값은 각 플렉스 아이템들의 기본 너비를 제외한 나머지 여백 부분을 나누어 가지는 비율을 지정한다. 예를 들어 아이템이 3개이고 각 증가너비 비율값이 1, 2, 1 이라면,

첫번째 아이템은 총 너비의 1/4 만큼 (25%)
두번째 아이템은 총 너비의 2/4 만큼 (50%)
세번째 아이템은 총 너비의 1/4 만큼 (25%) 을 가진다.


여기서 주의 !
증가너비 비율값은 각각의 플렉스 아이템의 기본너비까지 고려하여 여백을 나누게 한다. 같은 증가너비 비율값을 가지더라도 각각의 플렉스 아이템의 컨텐츠 너비 또는 기본너비에 따라 다르게 보일 수 있다는 것이다.


  • 같은 증가너비 비율값을 갖지만, 각 아이템의 컨텐츠 크기가 다를 경우

각 아이템들은 컨텐츠의 크기가 모두 다르기 때문에 너비가 조금씩 달라보인다. 같은 증가너비 비율값을 가지기 때문에 좌우 여백 비율은 동일하다.


  • 같은 증가너비 비율값을 갖고, 각 아이템의 기본 너비가 지정되지 않은 경우 (=컨텐츠가 없는 경우)

각 아이템들은 컨텐츠를 갖지 않기 때문에 너비가 모두 같아 보인다. 같은 증가너비 비율값을 가지기 때문에 좌우 여백 비율 또한 동일하다.



🍒 flex-shrink

<style>
	.container {
        display: flex;
    .item {
    	flex-shrink: 감소너비값;}
</style>


<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
</div>

flex item 의 감소너비 비율을 지정하는 속성이다.

기본값은 1 이고, 따로 값을 지정하지 않아도 플렉스 아이템은 유연하게 감소한다.
또한 숫자가 클수록 더 많은 너비가 감소한다.

감소너비 비율인 flex-shrink 값이 0 인 경우, 플렉스 아이템은 기존의 컨텐츠 너비만큼 또는 설정된 기본 너비 flex-basis 보다 작아지지 않는다. 가로 너비값을 고정하고 싶을 때 width 값과 함께 지정한다.
감소너비 비율인 flex-shrink 값이 0 보다 큰 경우, 플렉스 아이템은 지정된 감소너비 비율에 맞춰 유연하게 감소한다.

flex-shrink 값은 각 플렉스 아이템들이 감소하는 너비에 따라 다르게 계산된다. 예를 들어 200px 의 너비를 갖는 아이템이 2개이고, flex-shirink 값을 각각 1, 2로 지정한다. 총 감소 너비가 90px 이라면,

첫번째 아이템은 총 감소너비의 1/3 만큼 (=30px) 줄어들어 70px 의 너비값을 가진다.
두번째 아이템은 총 너비의 2/3 만큼 (=60px) 줄어들어 40px 의 너비값을 가진다.


가로 너비값을 고정하고자 할때, flex-shrink 값 사용하기

두개의 예시 모두 감소너비 비율값인 flex-shrink 값을 0 , 그리고 해당 플렉스 아이템의 너비값인 width 값을 따로 지정하였다. 첫번째 플렉스 아이템의 가로너비깂을 고정시키고자 한 것이다. 첫번째 에시는 컨테이너의 너비값을 넓게 보았을 때고, 두번째 예시는 컨테이너의 너비값을 좁게 보았을 때이다. 두가지 예시를 번갈아 보다 보면, 첫번째 플렉스 아이템은 컨테이너의 너비값에 영향을 받지 않고 지정한 너비로 고정된 것을 볼 수 있다.


  • 컨테이너의 너비값을 100% 로 지정했을 때


  • 컨테이너의 너비값을 300px 로 지정했을 때



🍒 flex-basis

<style>
	.container {
        display: flex;
    .item {
    	flex-basis: 기본너비값;}
</style>


<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
</div>

flex item 의 기본 너비를 지정하는 속성이다.

속성값으로는 % px em rem 등 단위값을 사용한다.
기본값은 auto 이며 해당 아이템의 width 값을 사용한다.
이때, width 값이 따로 지정되어 있지 않을 경우 아이템의 컨텐츠 너비를 사용한다.

기본 점유 크기를 지정한다고 보면 쉽다. 예를 들어 flex-basis 값을 100px 로 지정했을 경우,

원래 아이템의 width 값이 100px 보다 작을 경우 해당 아이템은 100px 로 늘어난다.
원래 아이템의 width 값이 100px 보다 클 경우 해당 아이템은 원래 width 값을 유지한다.


  • 원래 아이템의 width 값이 지정한 flex-basis 값보다 작을 경우


  • 원래 아이템의 width 값이 지정한 flex-basis 값보다 클 경우



🍒 align-self

<style>
	.container {
    	width: 310px;
        height: 300px;
        display: flex;
        align-item: stretch;}
    .item:nth-child(3) {
    	align-self: 속성값;}
    div {
    	border: 1px solid black;
        padding: 10px;
        margin: 10px;}
</style>


<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>

컨테이너의 교차축 cross-axis 을 기준으로 플렉스 아이템의 개별 정렬 방식을 지정하는 속성이다.

align-items 속성의 경우 컨테이너 내의 모든 플렉스 아이템들의 교차축 기준 정렬 방식을 지정하지만, align-self 속성은 일부 개별 아이템의 정렬 방식을 지정하고자 할 경우 사용한다.
또한 위 속성은 align-items 속성보다 우선한다.

속성값으로는 auto stretch flex-start flex-end center baseline 가 있다.

auto : 기본값, 컨테이너의 alin-items 속성을 상속 받는다.
stretch : 아이템의 높이를 늘려 수직으로 가득 채운다.
flex-srart : 아이템의 시작점으로부터 수직 정렬한다.
flex-end : 아이템의 끝점으로부터 수직 정렬한다.
center : 아이템을 가운데로 수직 정렬한다.
baseline : 아이템을 문자 기준선을 기준으로 수직 정렬한다.


  • 각 속성별로 개별 아이템들이 어떻게 정렬되는지 살펴보자.



profile
지나
이전 포스트

CSS 플렉스 박스 레이아웃 (flexible box layout) -container 속성

다음 포스트

CSS 그리드 레이아웃 (css grid layout) -container 속성

0개의 댓글