[참고] display:flex 사용할 때 justify-content가 적용 안됨

flex로 row, column 정렬을 할 때 justify-content가 적용되지 않음

 

#container {
	dispaly: flex;
    justify-content : space-between;
}

 

conclude

flex 내부 items이 고정되고 난 후에도, items을 묶고 있는 container에 여백이 있어야 justify-content가 잘 작동된다

 

이유

- if your flex items are all inflexible (flex: noone or flex: 0 0 auto), and smaller than the container.
- if your flex items are flexible, But can't grow to absorb all the free space, due to a max-width on each of the flexible items.

 

 

cf.

https://stackoverflow.com/questions/24052569/the-justify-content-property-isnt-working

The 'justify-content' property isn't working