flex 심화
flex-wrap
flex 적용시 자식 요소들을 무조건 한줄에 두는 것에 집중한다
부모의 공간이 부족하게 되면 자식요소에 설정한 크기보다 작아지게 된다
flex-wrap : 기본값 no-wrap
flex-wrap : no-wrap : 자식요소의 크기를 보장해준다(width)
flex-grow, flex-shrink
자식에게 적용하는 값
flex-shrink
no-wrap 일 때 공간이 부족하게 되면 자식들이 찌그러지게 되는데
flex-shrink 기본값 1 : 공간 부족시 같은 비율로 수축한다
2로 설정하게 되면 다른 자식들보다 2배 수축한다
flex-shrink: 0 시 자식이 부모박스 보다 크더라도 본래 크기를 보장해준다
슬라이더에 flex shrink 사용하기
.slider {
display: flex;
overflow: hidden;
width: 600px;
}
.card {
width: 400px;
height: 100px;
background-color: red;
margin-right: 10px;
flex-shrink: 0;
}flew-grow
default value: 0
flex-grow: 1 지정시 부모에 여분의 공간이 있다면 다 차지하게 된다
다른 자식에게도 flew-grow 0이 아닌값을 지정해주면 남은공간을 나눠가지게 된다
flex-grow:1
flex-grow:2
1/3 , 2/3 씩 부모의 남은 공간을 나눠가지게 된다
order
만약 내용을 변경하지 않고 출력 순서만 바꾸고 싶다면 order 속성을 사용한다
기본값은 0이고, 작은 값이 있는 요소부터 출력한다 값이 같다면 입력한 순서대로 출력
음수
특정 아이템을 앞으로 옮기고 싶을 때 유용하다
flex-flow
flex-direction & flex-wrap 한줄에 적고 싶을 때 사용
align-content
flex-wrap: wrap 으로 인해 여러줄이 생길 때 줄 간 간격을 설정 할 때 사용된다
flex-direction 에 따라 줄의 방향이 달라지게 된다
가능한 설정값
flex-start, flex-end, center, space-between, space-around, stretch
align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.
