css 반응형 웹 Flex 시작하기

 

CSS Flex vs Grid

• Grid는 Flex보다 늦게 나온 기술로 Flex로 구현가능한 대부분을 구현할 수있다.
• 하지만 두가지 모두알고 적절한 상황에 적절하게 사용하는 것이 중요하다.

 

reset.css

기본 html 태그 속성들의 값을 모두 없애주는 css 파일

https://meyerweb.com/eric/tools/css/reset/ 

 

 

 

Flex 레이아웃 기본적인 HTML 구조

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

 

(1) 컨테이너에 적용 속성

1) display: flex

• 내용물의 width 만큼만 차지한다.
• 좌 -> 우로 이동하는 축이 메인축, 위 -> 아래로 이동하는 축은 교차축

display: block;

 

 

display: flex;

 

display: inline-flex;

 

 

 

2) 배치 방향 설정: flex-direction

• 아이템들이 배치되는 축의 방향을 결정, 
• flex-direction: row; 기본 값, 메인축을 좌에서 우

flex-direction: row;

 

• flex-direction: row-reverse; 메인축을 우에서 좌

flex-direction: row-reverse;

 

• flex-direction: column; 메인축을 위에서 아래

flex-direction: column;

 

• flex-direction: column-reverse; 메인축을 아래에서 위로

flex-direction: column-reverse;

 

 

 

3) 줄넘김 처리 설정 flex-wrap

• 컨테이너가 한줄에 모두 담길 수 없을때 가장 오른쪽에 있는 아이템을 아래 또는 위로 이동시켜 줄바꿈을 시켜준다.
• default값으로 nowrap으로 설정되어 있다.

flex-wrap: nowrap;

 

flex-wrap: wrap;

 

flex-wrap: wrap-reverse;

 

 

 

4) flex-flow

•  flex-direction과 flex-wrap을 동시에 지정 가능한 속성
•  direction wrap 순으로 작성

flex-flow: row wrap;

 

 

 

 

 

 

---

 

 

 

 

 

(2) 아이템에 적용하는 속성

• justify 메인축 방향으로 정렬
• align 수직축 방향으로 정렬

 

 

1) justify-content, 메인축 방향 정렬

• justify-content로 정렬된 아이템은 화면 사이즈에 따라 위치가 계속 변경된다.
• 기본값 justify-content: flex-start;

justify-content: flex-start;

 

 

• justify-content: flex-end; 모든 아이템이 메인축 가장 끝으로 이동하고 flex-direction reverse와 차이를 보인다.

justify-content: flex-end;

flex-direction: row-reverse;

 

 

• justify-content: center;

justify-content: center;

 

• justify-content: space-between; 각 아이템 사이에 균일한 간격의 공간이 발생

justify-content: space-between;

 

 

• justify-content: space-evenly; space-between과 달리 1과 3 즉 맨 앞과 끝에도 균일한 간격의 공간 발생

justify-content: space-evenly;

 

• justify-content: space-between; 각 아이템 양 옆으로 균일한 간격의 공간 발생

justify-content: space-around;

 

 

 

 

 

2) align-items, 수직축 방향 정렬

• justify-content와 수직인 방향으로 정렬
• align-items: flex-start;

align-items: flex-start; 

 

•   align-items: flex-end;

align-items: flex-end;

 

•   align-items: center;

align-items: center;

 

•   align-items: stretch; 아이템을 컨테이너 크기만큼 쭈우우욱 늘린다.

align-items: stretch;

 

•   align-items: baseline; 아이템을 텍스트 베이스라인 기준으로 옮긴다. (영어 소문자 등 차이점을 보임)

align-items: baseline;

align-items: baseline;

 

 

 

 

 

 

3) align-content, 여러 행 정렬

• flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때 수직축 방향 정렬을 결정
• align-content: flex-start;

align-content: flex-start; 

 

 

 

•   align-content: flex-end;

align-content: flex-end; 

 

•   align-content: center;

align-content: center; 

 

 

 

•   align-content: space-between;

align-content: space-between;

 

 

•   align-content: space-evenly;

align-content: space-evenly;

 

•   align-content: space-around;

align-content: space-around;

 

 

4) order

• 다른 플렉스 아이템과 위치를 변경할 수 있다.

 

 

5) flex-grow

• flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정
• 기본값은 0, 0보다 큰 값으로 설정되면 Flex한 박스로 바뀌게 된다.

flex-grow

flex-grow

 

 

6) flex-shrink

• 아이템이 flex-basis의 값보다 작아질 수 있는지 결정
• 기본값 1, 1보다 작으면 커지고 1보다 커지면 작아진다.

 

 

7) flex-basis, 박스의 영역

• Flex 아이템의 크기를 설정

 

 

 

8) flex

• flex-grow, flex-shrink, flex-basis를 한번에 쓸 수 있는 속성

 

 

 

 

 

 

 

 

정리

• 컨테이너 조작
  • display: flex; 
  • flex-direction: 컨테이너 안의 아이템의 메인축을 결정.. row, column, row-reverse, column-reverse
  • flex-wrap: 컨테이너 아이템의 줄바꿈 여부 결정.. nowrap, wrap, wrap-reverse
  • flex-flow: direction, wrap을 동시에 설정 가능
  • justify-content: 메인축 기준의 아이템을 정렬 기능, flex-start, flex-end, center, space-between, space-around
  • align-items: 수직축 기준으로 아이템 정렬 기능, flex-start, flex-end, center
  • align-content: wrap이 된 아이템들을 정렬하는 기능, flex-start, flex-end, center, space-between, spacae-around
• 아이템 조작
  • order: 컨텐츠의 위치 변경
  • flex-grow: 아이템이 늘어나는 것을 유연하게 조작
  • flex-shrink: 아이템이 줄어드는 것을 유연하게 조작
  • flex-basis: 아이템의 크기를 결정
  • flex: grow shrink basis 세가지를 동시에 설정
  • align-self: align-items 속성 값을 해당 아이템에 적용시킬때 사용