레이아웃과 반응형 웹 - 래이아웃을 위한 속성 flex

2024/03/04

안녕하세요 lika-7 입니다.

이번시간에는 flex 속성을 다루겠습니다.

플렉스 박스란

flex 속성을 사용한 레이아웃 모델을 플렉스 레이아웃이라고 합니다

이를 이용하여 요소들을 X축, Y축 기준으로 유연하게 배치할수 있습니다.

<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>
<style>
  .container {
    display: flex;
    border: solid 2px orange;
    padding: 30px;
  }
  .box{
    border: solid 1px #ddd;
    flex:1;/*flex 아이템의 너비가 flex container 안에 동일하게 맞춰짐*/
  }
</style>

• 유연하게 배치할 요소의 부모 요소의 displau 속성값을 flex로 지정합니다.
  • 이것을 flex conteiner하고 하고, 자식요소를 flex item이라고 합니다.

<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>
<style>
  .container {
    display: inline-flex;
    border: solid 2px orange;
    padding: 30px;
  }
  .box{
    border: solid 1px #ddd;
    flex:1;/*flex 아이템의 너비가 flex container 안에 동일하게 맞춰짐*/
  }
</style>

• flex container 값은 flex와 inline-flex가 있습니다.
  • flex는 block과 inline-flex는 inline-block 속성에 대응합니다.

flex-direction

• flex-direction 속성을 이용해 가로 정렬, 세로 정렬을 선택할 수 있습니다.

<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>
<style>
  .container {
    display: flex;
    border: solid 2px orange;
    padding: 30px;
    flex-direction: column;
  }
  .box{
    border: solid 1px #ddd;
  }
</style>

• row: 가로 정순으로 졍렬
• column: 세로 정순으로 졍렬
• row:-reverse: 가로 역순으로 졍렬
• column-reverse: 세로 역순으로 졍렬

flex-wrap

• flex-wrap 속성을 이용해 플랙스 아이템을 여러 행으로 나눠 공간을 배분할 수 있습니다.

<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>
<style>
  .container {
    display: flex;
    border: solid 2px orange;
    padding: 30px;
    flex-wrap: wrap;
  }
  .box{
    border: solid 1px #ddd;
    flex-basis:40%;
  }
</style>

• flex-wrap 속성은 wrap이나 nowrap을 지정할 수 있습니다.

flex container에 지정하는 정렬 속성

플렉스 아이템을 정렬하기 위해 사용합니다

justify-content

justify-content 속성은 flex-direction 속성에 지정한 방향에 따라 플렉스 아이템들을 정렬합니다.

속성값 설명 justify-content:row justify-content:column

flex-start	플렉스 컨테이너의 시작점을 기준으로 정렬(기본값)	왼쪽 정렬	위쪽 정렬
flex-end	플렉스 컨테이너의 끝을 기준으로 정렬	오른쪽 정렬	아래쪽 정렬
center	플렉스 컨테이너 가운데를 기준으로 정렬 (세로 방향일 때는 플렉스 컨테이너의 높이가 있어야 세로 정렬 가능)	가로 정렬	세로 정렬
space-between	플렉스 아이템 사이를 균등한 간격으로 정렬	가로 정렬	세로 정렬
space-around	플렉스 아이템 둘레를 균등한 간격으로 정렬	가로 정렬	세로 정렬
space-evenly	플렉스 아이템 사이와 양 끝을 균등한 간격으로 정렬	가로 정렬	세로 정렬

flex-start

flex-end

center

space-between

space-around

space-around로 지정하면 플랙스 아이템의 둘레를 동일한 간격으로 만들어 배치합니다

space-evenly

space-evenly로 지정하면 플렉스 아이템 사이의 간격을 모두 동일하게 만들어 배치합니다

align-items

• align-items 속성은 플렉스 아이템의 진행 방향을 기준으로 교차축(수직 방향) 정렬입니다.

• justify-content 속성이 플렉스 아이템의 주축 배치에 관련된 정렬이면 align-items는 플렉스 아이템의 교차축 정렬이라고 할 수 있습니다.

• align-items 속성은 아래와 같습니다속성값 설명 

  stretch	플렉스 컨테이너의 높이, 너비 만큼 공간 배분
  flex-start	플렉스 컨테이너의 왼쪽이나 위로 정렬
  flex-end	플렉스 컨테이너의 오른쪽이나 아래로 정렬
  center	플렉스 컨테이너의 가로나 세로 기준으로 가운데 정렬
  baseline	플렉스 아이템들의 텍스트 기준선에 따라 정렬(알파벳 기준 텍스트 기준선) flex-start와 동일하게 구현

flex item에 지정하는 정렬 속성

• 아이템의 크기와 비율을 맞추기 위해 사용합니다
• 플렉스 아이템은 기본적으로 플렉스 아이템에 담긴 내용만큼 크기가 지정되고, 플렉스 컨테이너의 너비 안에서 정렬됩니다.

flex-basis

• flex-basis 속성은 플렉스 아이템의 기본크기를 지정하는 min-width의 속성과 동일합니다.
  • flex-basis 에 지정한 값이 플렉스 아이템의 최소크기가 됩니다.

flex-grow

• flex-grow 속성은 flexbox 레이아웃에서 flex 항목이 사용 가능한 추가 공간을 어떻게 채울지를 결정하는 데 사용됩니다.
• 이 속성은 flex 항목이 flex 컨테이너 내에서 얼마나 확장될 수 있는지를 지정합니다.

flex-shrink

• 플렉스 아이템이 flex-basis의 값보다 작아질 때 플렉스 아이템의 크기를 정할수 있습니다.

flex

• flex 속성은 flex-grow, flex-shrink, flex-basis를 한번에 작성하는 축약형 속성입니다.
  • flex: 1;
    • /* flex-grow: 1; flex-shrink: 1;, flex-basis: 0; */
  • flex: 1 1 auto;
    • /* flex-grow: 1; flex-shrink: 1;, flex-basis: auto; */
  • flex: 1 500px;
    • /* flex-grow: 1; flex-shrink: 1;, flex-basis: 500px; */

order

• 플랙스 아이템의 배치 순서를 제어할 때 사용합니다.
• 보이는 형식만 변경되고 실제 요소의 위치는 변경되지 않습니다.2024/03/04이번시간에는 flex 속성을 다루겠습니다.flex 속성을 사용한 레이아웃 모델을 플렉스 레이아웃이라고 합니다