CSS : Flexbox

백광호·2020년 10월 18일

my--note

목록 보기

5/17

Container에 적용되는 대표적인 속성

display
콘텐츠의 표시 방법을 정하는 태그 flexbox를 이용하기 위해선
display 태그의 속성을 flex로 변경해야 한다
flex-direction
콘텐츠의 정렬 방향을 정하는 태그 기본값은 row이며
뒤에 row-reverse를 붙이면 반대로 정렬된다.
기본적으로 main axis는 수평, cross axis는 수직이다

column으로 변경시 위에서 아래로 정렬되며
마찬가지로 column-reverse를 붙이면 반대로 정렬된다

또한, column으로 변경 시 main axis(수직)와 cross axis(수평)가 뒤바뀐다

warp으로 변경 시 브라우저가 작아지면 콘텐츠를 아래로 넘긴다
flex-direction과 마찬가지로 reverse를 사용할 수 있다.

flex-flow
위 두 태그를 동시에 적용시키는 태그로 border와 비슷하다
[에시]
```
```css
.container {
flex-flow: column warp;
}
```
```
justifty-content
item의 배치를 정하는 속성, 기본 속성은 flex-start
순서는flex-direction를 기준으로 배치하며
flex-end를 입력하면 아이템의 순서를 유지하되 끝에서부터 배치한다
이 태그는 main axis를 기준으로 배치하는 태그이다

이 외에도 center, space-around, space-evenly등의 속성이 있다.

여러 브라우저와 호환성이 좋지 못함 MDN

align-items
아이템의 크기에 상관없이 정렬할 수 있는 속성
가장 유용한 속성은 baseline이 있으며 이것을 사용하면
콘텐츠의 크기에 상관없이 균등한 위치로 정렬할 수 있다
align-content
justifty-conten와 동일한 태그의 사용이 가능하다
이 태그는 cross axis를 기준으로 배치하는 태그이다

여러 브라우저와 호환성이 좋지 못함 MDN

Item에 적용되는 대표적인 속성

order
아이템 배치의 순서를 정하는 속성으로
숫자를 입력해 순서를 정할 수 있다
flex-grow
아이템의 크기를 정하는 속성
정해진 만큼 브라우저를 차지한다
숫자를 입력해 크기를 정할 수 있다
flex-shrink
아이템이 줄어드는 크기비율을 정하는 속성
브라우저의 크기가 작아질 때
정해진 비율만큼 더 많이 줄어든다
숫자를 입력해 비율을 정할 수 있다
flex-basis
아이템의 크기비율을 정하는 속성
브라우저의 크기가 변경 되어도 비율이 유지된다
기본값은 auto이며 백분율로 입력한다
flex
위 3가지 태그를 동시에 적용시키는 태그로
flex-flow, border와 비슷하다
align-self
justifty-content, align-content와 같이
아이템의 배치를 정하는 속성으로
위 두개와 같은 속성을 사용한다

자식 요소에는 어떤 것도 적지 말것
부모 요소에 flexbox를 적용하면 자식 요소는 부모 요소를 따라온다.
다만 자식 요소의 items를 정렬할때는 flexbox를 적용한다.
flex-direction 사용 시 주축 변경 유의
값을 column으로 변경 시 위에서 셜명한 것과 같이 주축이 변경된다.
주축이 변경되면 justify-content가 수직, align-items가 수평으로 정렬된다.

FLexbox 사용 연습은 아래 링크

Media Queries를 사용해 모바일, 태블릿, 데스크탑에 따라 웹사이트의 콘텐츠를 유동적으로 보여주는 방법

최근엔 데스크탑, 태블릿, 모바일의 기준을 나누는 Break Point가 없지만
굳이 따지자면 아래와 같다

@media screen and (min-width: 800px) {
	.container {
		width: 50%;
	}
}

screen 이외에도 print, all속성도 사용이 가능하다
and 이외에도 not, only, ,(comma) 속성도 사용이 가능하다

내가 많이 햇갈리는 것이 max-width, min-width인데
max-width는 ~보다 작으면
min-width는 ~보다 크면
으로 알아두고있다.

orientation: landscape;속성을 사용해 디바이스의 가로모드일 때만
적용되는 옵션도 작성할 수 있다.(portrait;는 세로모드)

Media Queries에 대한 자세한 설명은 아래 링크로
MDN 미디어 쿼리 초보자 가이드
MDN 미디어 쿼리 사용하기 (주요기능 확인 가능)

안녕하세요