A sentimental robot

Flex Box property 본문

CSS

Flex Box property

GOD03219 2019. 4. 9. 12:37

Flex box

'display : flex' defines the container flexbox.

flex-direction : row (For default)

the cross axis would be vertical / the main axis would be horizontal

 

flex-direction : column

the cross axis would be horizontal / the main axis would be vertical

 

align - items 

controls the cross axis.  교차축 ,수직축 담당

also controls each flex item's property 'align-self 'all. 각 플렉스 아이템들이 차지하는 너비 안에서의 정렬

 

align - content 

for multi line flexible boxes. no effect when items are in a single line.

플렉스 컨테이너에서 아이템들이 컨테이너 상에서 어떻게 정렬될지를 정의한다.

 

align-self

It aligns the whole structure according to its value.

 

justify-items

controls  the main axis 주축, 수평축 담당

 

 

 

 

'CSS' 카테고리의 다른 글

Padding  (0) 2019.05.06
Margins  (0) 2019.05.06
Background-image  (0) 2019.05.06
CSS Basic - Stylesheet적용하기  (0) 2019.04.16