css.. flexbox
css를 좋아하는사람은 별로없을것같다
복잡하고 말도안듣고(?) ..
그래도 알아두면 좋은건 사실이라서 포스팅해둔다
css중에서 flexbox를 알아보자
* flex-direction (방향)
flexbox는 박스가 수직분할되는것이 기본값임 그러나 방향을 설정해주면 수평으로도 분리가능
flex-direction은 부모박스에 적용함 자식박스에 특별한 속성을 안줘도 영향을 받음
row(기본값)
column
flex: <grow> <shrink> <basis>
<grow> : 얼마나 늘어날수있는지 설정
<shrink> : 설정한 비율만큼 박스크기가 줄어듬 grow속성과 함께사용은 권장x
<basis> : 박스의 기본크기 ,자식박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기전까지는
기본크기임 grow가 0일때 basis크기를 지정하면 그 크기유지됨
* flex-grow (얼마나 늘리는지)
* flex-basis (얼마만큼의 크기를 갖는지)
*콘텐츠 정렬방법
axis? > main axis와 cross axis로 구분함
main axis 는 flex-direction 속성에 의해서 결정됨
cross axis는 여러개의 main axis와 수직을 이루는 방향임
ex) main axis가 flex-direction의 기본값인 row라서 가로일때 cross axis는 세로가됨
*수평정렬? justify-content
부모박스에 적용하면 자식박스를 수평으로 정렬가능
주요옵션들
flex-start
flex-end
center
space-between
*수직정렬? align-items
부모박스에 align-items속성을 적용하면 자식을 수직으로 정렬가능
주요옵션
flex-start
flex-end
flex-center
stretch
*Atomic css 방법론 > 구현클래스와 이름을 1:1로 일치시켜 작은단위로css작성하는기법
ex) .w70 {width: 70%}, .h40 {height: 40%} 만들어두고 사용함
이전포스팅에 css의 단위를 정리해둔게있는데(https://5witch.tistory.com/27)
단위정도만 알아두고 flexbox나 이런건 그냥 그때그때 찾아쓰는게 정신건강에 좋을것같다..