03/09 HTML/CSS Flex Display, Flexibility

 

display : flex

 

 

* display

 

 

크게 block 과 inline으로 나뉜다

 

block에 스타일이 가미된 것 -> list-item / table

 

인라인은 높이나 너비를 적용할 수 없다 (b, a, span)

 

인라인블럭은 높이 너비 적용가능하게 한 것 (image, input)

 

 

디스플레이 방식이 뭐냐에 따라서 적용될 수 있는 것이 다르다.

 

 

 

이런식으로 사용

 

 

 

 

디스플레이가 기본적으로 인라인인 것들 : 블럭이 아닌 것, 방을 만드는 게 아닌 것

 

태그들은 기본적으로 다섯가지의 디스플레이를 가지고 태어난다

flex와 grid의 형태를 보이는 태그는 없다 -> 직접 바꿔줘야 한다 (display : flex)

 

 

 

 

 

 

yeonee3219.tistory.com/11

02/26 HTML 블록 태그와 인라인 태그

yeonee3219.tistory.com/13

03/02 HTML/CSS 인라인 태그, 선택자

 

 

 

 

 

 

 

 

 

 

 

Flex Box  레이아웃

 

 

수직 수평 방향성을 가지고 있고 원하는 방향으로 배치 할 수 있다.

 

 

별 차이는 없지만 두가지로 제공하고 있다.

 

 

 

 

 

숫자가 왜 선을 넘어갈까..

 

div에 높이를 적용했기 때문

 

 

 

 

 

 

 

Flex 디스플레이 활용하기

 

 

 

container 와 items에 적용하는 속성이 구분되어 있다.

 

 

 

 

 

 

 

 

* display : flex 적용

 

display : flex 적용했을 때 기본 크기 너비이다.

 

div container에 flex적용시 컨테이너가 되고 그 안의 클래스들은 아이템이 됨

 

 

 

flex- grow -> 여백을 두지 마라 : 여백을 나누어 갖게 된다

 

 

 

'flex 했을 때의 기본 크기를 뺀' 여백을 나누어 가진다.

 

1의 크기가, 다른 것들의 3배가 아니라

여백의 크기가 3배인 것이다

 

 

 

box1의 크기가 다른 box 두배가 된 것이 아니고

1의 여백이 다른 박스의 여백보다 두 배

 

 

 

 

so

 

 

 

* flex-grow

 : 여백을 나눠서 배수로 갖게 되는 것

 : 증가 너비 비율 설정 (기본값 : 0 )

 

 

* flex-shrink

 : 페이지 창을 줄였을 때, 공간이 줄어들 수 있도록 하는 것

             0인 경우, 공간 줄어들지 않는다

 : 감소 너비 비율 설정 (기본값 : 1 )

 

 

 

* flex-direction

: 메인 축이 수평인지 수직인지 정하는 것 /  주 축(main-axis)을 설정 

 

 

 

 

* flex-basis

: 공간을 배분하기 전의 기본 너비 설정 (기본값 : auto)

 

 

 

 

 

 

heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드