[SEB_FE_44] 4일차 FLEX

Kim Minki·2023년 2월 17일
0

코드스테이츠

목록 보기
4/29
post-custom-banner

4일차에는 Flexbox에 대해서 자세히 알게 되었다.
Flexbox의 flex(flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다.
부모 요소에서 적용해야 하는 Flexbox 속성들과 자식 요소에서 적용해야 하는 Flexbox 속성들을 자세히 배우게 되었다.

부모 요소에 적용해야하는 Flexbox 속성들

flex-direction : 정렬 축 정하기
flex-wrap : 줄 바꿈 설정하기
justify-content : 축 수평 방향 정렬
align-items : 축 수직 방향 정렬

자식 요소에 적용해야 하는 Flexbox 속성

flex 속성의 값

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>
profile
코딩을 하자

0개의 댓글