[CSS] Float, Flex, Grid

Float

CSS의 정렬을 위해 사용되는 속성으로 float을 이용해 띄워지면(정렬되면) 텍스트 및 인라인 요소가 그 주위를 감싸며 흐르듯 배치되기 때문에 이름이 붙여진 것을 보임

 

절대위치 요소는 float 속성을 무시한다

 

자주 사용되는 Value

• left : 블록의 좌측으로 이동 후 부동
• right : 블록의 우측으로 이동 후 부동
• none : 기본값으로 기본속성 그대로 유지
• inline-start : 시작쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐
• inline-end : 끝쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐

---

Flex-box

CSS3에서 처음 소개된 한방향 레이아웃 모델로써 HTML 요소 정렬에 사용되며 float 더 적은 코드와 읽기 쉬운방법으로 float을 대체하고 사용 가능한 공간을 최대한 활용할 수 있도록 여러 기능을 제공한다.
Flexbox는 일반적으로 하나의 container와 여러개의 items로 구성이 됩니다.

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

.container {
  display: flex;
}
.item {
  flex: 1;
}

flex-box 속성들

 

Flex Container

• flex-direction : main axis방향을 바꾸거나 결정(row, column , row-reverse, column-reverse...)
• flex-wrap : 충분한 공간이 없을 시 item의 줄바꿈 여부를 정의
• justify-content : flex-item이 main-axis 따라 정렬되는 방식을 결정(space-between, space-around, space-evenly...)
• align-items : cross-axis따라 정렬되는 방식을 결정(center, flex-start, flex-end, stretch... )

 

Flex Item

• align-self: align-items 값을 재정의 (grid에서는 gird area항목을 정렬 후 flexbox에서 cross axis 항목을 정렬)
• order: 요소 하나를 시작부분으로 옮김(초기값 : 0)
• flex-grow: item의 확정과 관련된 속성으로 1이상의 값을 부여하면 가능한 전체 공간을 차지하게 된다
• flex-shrink : item의 축소와 관련된 속성 기본값은 1로 공간이 더 이상 없다면 축소 될 수 있게 한다. 값이 0이면 줄어들지 않는다
• flex-basis : item의 기본크기를 결정 (기본값: auto) width를 지정하는 대신 너비를 설정할 수 있다.

 

축약사용

flex-grow, flex-shrink, flex-basis 속성은 축약해서 사용 가능하며 flex: 1 1 0 => flxe: 1 로 표현 가능하다

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  /* flex: 1 */
}

 

Grid와 Flex의 차이

---

Grid

flex와는 다른 두방향 레이아웃 시스템이기에 카드형식으로 되어있는 신문형식의 레이아웃을 만드는데 유리하다.

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

.container {
  display: grid;
}
.item {
  flex: 1;
}

 

• Grid Container : gird의 전체영역
• Grid item : 자식요소들로 배치되는 아이템들
• Grid Track : gird의 행(row) 열(column)
• Grid Cell : gird의 한칸 grid item 하나가 들아가는 가상의 칸
• Grid Line : gird cell을 구분하는 선
• Grid Number : gird line의 각 번호
• Grid Gap : gird cell 사이의 간격
• Grid Area : gird line으로 둘러싸인 사각형 영역 (grid cell의 집합)

Gird Container

• grid-template-rows, columns : grid tarck의 크기를 지정해주는 속성

// 1 : 1 : 1 비율로 만들겠다
grid-template-columns: 1fr 1fr 1fr;

// 고정크기와 섞어서 사용 가능
grid-template-columns: 100px 2fr 1fr;

// repeat() 사용
grid-template-columns: repeat(5, 1fr)

// 최솟값 최댓값 설정 가능
grid-template-rows: repeat(3, minmax(100px, auto));

// 개수를 정하지 않고 설정된 너비에 따라 최대한으로
grid-template-columns: repeat(auto-fill, minmax(20%, auto));

 

• row-gap, colum-gap, gap : grid cell 사이의 간격을 설정
• grid-auto-rows, columns : 통제를 벗어난 위치에 있는 track의 크기를 지정한다 즉 개수를 미리 얼 수 없는 경우에 알아서 개수를 지정한다 (크기를 통해서)

 

Gird Item

영역을 지정하는 방법

• grid-column, -start, -end gird-row, -start, -end : 영역지정에 사용됨

// 붉은 영역을 지정하는 방식
.item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

 

• grid-template-areas : 영엑에 이름을 붙여서 사용하는 배치방법
• grid-auto-flow : item 자동배치 흐름 (row, column ...)
• align-items: 세로축 정렬
• justify-items: 가로축 정렬

그 외 item에 적용할 수 있는 다양한 옵션이 있음

---

언제 사용하는 것이 좋은가?

Grid의 경우 정해진 틀을 가지고 배치를 할 수 있으며 신문기사와 공간을 각지계? 사용해야하는 경우에 활용하면 좋을 것 같고 Flex의 경우에는 Grid보다는 좀 더 자유로운 양식에서 사용하는 것이 좋을 것 같다.

 

 

 

 

 

 

 

 

참고자료 : 블로그1 , 블로그2 , 블로그3