Flexbox와 Grid

* 유투브에 구독중인 1분코딩님의

CSS Flexbox와 CSS Grid, 한번에 정리!

영상을 보면서 정리한 글 

 

 

flex 기본정리

< 컨테이너에 적용하는 속성들 >

• 컨테이너에 display : flex; 를 지정 
• flex-direction : 자리 설정 ,컨테이너에 디스플레이 설정 후 같이 설정 ( row, column )
• flex-wrap : 창이 줄어들때의 고정 (wrap )
• justify-content : 지금 현재 축 방향으로 정렬  ( 오뎅꼬치 생각하기 )
• align-item : 현재 축의 수직 방향을 정렬하는 스타일 (flex-end, flex-start ,center)
• align-content : flex-wrap이 wrap 인 경우에 사용가능 

 

<아이템에 적용하는 속성들>

• flex-grow : 신축성있게 늘려주는 속성 / 각각을 얼마큼의 비율로 늘어나게 해줄건지 정하는 속성 
  원래 자기가 가진 여백의 비율을 얼마큼 나눠가질지 정해준다 .
• flex-basis : 기본값 auto / 기본적으로 아이템이 가진 공간을 지정 
  기본적으로 0 으로 셋팅 
• flex : 축약형으로 1로 사용하면  flex-basis가 0 으로 알아서 셋팅 
• align-self : 자기자신 정렬 
• order : 아이템 정렬

 

 

그리드 기본정리 

< 컨테이너>

• display : grid 
• grid-template-columns : 비율 지정 ex ) 4fr 6fr 
• repeat(4,1fr)
• grid-gab : 간격 지정 ex ) 1rem
• grid-auto-rows : 컨텐츠의 높이 지정 ex) minmax(200px,auto) 
• justify-items : ex) 오뎅꼬치 가로 정렬
• align-items : 세로 정렬  

 

< 아이템 설정 > 

• grid-colums : 해당 아이템의 너비를 조정한다 
• grid- row : 해당 아이템의 높이를 조정한다 

 

---

 

▶ 간만에 CSS를 공부하면서 처음 개발 공부했을때가 생각난다

CSS가 너무 어려웠다 느꼈고 

진심 울고 싶었었다... ㅠㅠㅠㅠ

하지만 포기할순 없지 ㅠ 

계속 반복 학습하여 내것으로 만들어야지 

영상 자체는 FLEX와 GRID에 대해 정말 쉽게 설명해주셨다

문제는 내가 멍청이라 30분 영상을 1시간 넘게 본게 함정이지만 하하하하