4/28 (목) 페이지 레이아웃 / FlexBox

 

 

※ 화면에 박스 위치를 (0,0)에서 시작하고 싶을 때 ※

브라우저에 따라 시작위치 다를 수 있음

 

* {

  box-sizing: border-box;

}
body {

  margin: 0;
  padding: 0;
  
}

 

 

▶ Flexbox

 

.example{

	display: flex

}

 

• 부모 박스 요소에 'display: flex' 라는 속성을 적용
• 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
• 부모 요소에 속성을 지정하면 한번에 자식 요소의 속성을 넣을 수 있어 편리함

 

 

Flex 요소에 방향 지정(flex-direction)

 

.example
{
	display: flex;
	flex-direction: row;
{

• flexbox의 자식 요소들의 방향 결정
• row( 기본값 ) : 자식 박스 가로로 정렬 / column : 자식 박스 세로로 정렬
• row-reverse : row 값에 오른쪽부터 정렬 / column-reverse : column 값에 아래쪽부터 정렬
• display 속성에 flex 값은 부모 요소에 적용 (display: flex)

 

 

Flex 요소에 줄바꿈(flex-wrap)

 

.example {
	display: flex;
	flex-wrap: wrap;
}

• flexbox의 자식 요소들이 강제로 한줄에 배치되게 할 것인지, 영역 내에서 줄바꿈 할 것인지를 결정
• 속성값 : wrap(줄바꿈 허용), nowrap(줄바꾸지 않고 한줄에 배치), wrap-reverse(줄바꿈 반대로, 아래->위)

 

 

flex-flow

 

.example {
	display: flex;
  	flex-flow: column wrap;
}

• flex-direction 속성과 flex-wrap 속성을 합쳐서 flex-flow 라는 속성으로 사용
• 속성값은 차례대로 direction과 wrap

 

 

Flexbox 부모 요소에 적용하는 정렬 속성

•  Main Axis 와 Cross Axis
  • Main Axis: flex-direction과 같은 방향 축
  • Cross Axis: flex-direction의 수직축

 

flex 방향(row 기준, column은 90도 돌린 방향)

• justify-content : 자식 요소 main axis 선상 정렬
• align-items : 자식 요소 cross axis 선상 정렬 
• align-content : 자식 요소 cross axis 선상 정렬
  • wrap으로 설정된 경우에만 관련있음(줄바꿈이 있을때만)
  • 여러줄 있을 때 줄들 사이의 간격 지정

 

 

속성값

속성값	설명
flex-start	flex 시작 부분으로 정렬
flex-end	flex 끝 부분으로 정렬
center	item들을 중앙으로 정렬
space-between	item 사이의 일정하게 공간
space-around	item 사이와 처음, 끝 부분에도 일정하게 공간

 

 

 

flex: grow shrink basis

 

문법 : flex: grow(팽창 지수) shrink(수축 지수) basis(기본 크기)

기본값 : 0 1 auto

자식요소에 각각 지정 가능

 

grow

• 컨텐츠 크기만큼 자식박스 크기 자동으로 지정됨
• grow 값은 전체 부모 박스 내에서 해당 자식 박스의 가로(또는 세로)의 비율
• 값을 1로 지정하면 1/n , 2로 지정하면 2/n
• 자식 박스의 전체 grow 값을 같게 지정하면 동일한 비율 차지
• flex-grow 로 grow 속성만 변경 가능

shrink

설정한 비율만큼 박스가 줄어들음

grow 값과 basis 값을 지정하면 shrink 값은 계산하기 어려워지므로 grow 만 쓰는 것 추천

grow 값 지정하면 shrink 값은 지정 안하거나 1 로 지정

 

basis

자식 박스의 크기 최소 비율

 

 

☞  참고) CSS 아키텍쳐

 

1. BEM(Block-Element-Modifier)

 

• CSS에서 구성요소를 블럭으로 나누어서 이름을 짓는 방법

 

 

• 블럭안엔 블럭이 포함될 수 있음. 

 

ex) header block 안에는 Logo block, search block, navigation block 등이 들어갈 수 있음

• ‘block__element--modifier’ 형식으로 분리

ex) .header__navigation--navi-text

 

2. Atomic CSS

 

• 같은 속성을 지정해줄 요소끼리 같은 이름 지정하는 방식

ex) width 값을 70%로 지정 -> class=“w10”

      height 값을 100%로 지정 -> class=“h100”

 

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

Flexbox - Web 개발 학습하기 | MDN

https://flexboxfroggy.com/#ko

Flexbox Froggy

↑ Flexbox 실습 페이지