{시트지 댓글달기}
{플롯?연습}
box-sizing:content-box
했는데 변화가 없으면 기본값이다
border-box
무조건 width 값을 지키고 싶으면 쓰는 것
pond
float
inline-block 말고 쓰는 것인데 그거 말고도
display:flex가 있다
flex
:inline-block 처럼 자식한테 직접 다는 것이 아니라 부모한테 줘야 한다,
그러면 한줄서기가됨,
부모한테 영향이 가는 것이 아니라 자식에게 영향이감
flex-wrap:wrap
알아서 줄바꿈을 시킬 때
flex-wrap:nowrap가 기본값
white-space:nowrap과 반대
grid를 쓰자
그리드가든
min-height 최소높이
그냥 height는 넘어가는것을 책임지지 않는다
.min-height-100vh{
height:10vh;
align-items:stretch;
아이템 정렬 기본값
쭉 늘리는 성질
세로정렬을 할 수 있다
align-items:
start 위쪽
end 아래
center 가운데로 정렬할 수 있다
justify-content:flex 가로정렬
start 기본값
end 오른쪽
center 가운데
justify-content:center
가로정렬가능
justify-content:space-between;
사이에 여백을 줌
justify-content:space-around;
주변에 여백을 나눠가짐
align-self:flex-start;
자식에게 주는 정렬
이걸 가진 애만 맨 위로 올라감
flex-grow:1
필수적으로 사용되는 공간
이것의 기본값은 0인데 1이라도 주면 다 채워줌(상대적)
상대적이기 때문에 다른애(원래 0이었음)한테 1주면 반으로 나누어짐
flexbox playground 보면서 개념 다시 정리
정리표를 보면 자주 쓰이지는 않지만
justify center 많이 씀
flex-direction:column 세로
vh:100%는 기준으로 100%
min-height:100vh 넘어간 것까지 다 채워줌
display:flex;
flex-direction:column;
flex-grow를 위해 한 저 두 줄..
{잘쓰진않지만}
flex-shrink
수축하지 않음
flex-basis
축의 너비나 높이
방향
px 단위
transform:rotate(90deg);
90도 돌게하기
