CSS | Flexbox

크롱·2023년 3월 8일
0

CSS

목록 보기
3/9

같이봐도 좋을 포스트: https://velog.io/@kurong/%EB%A9%8B%EC%82%AC-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%EC%BF%A8-5%EA%B8%B0-TIL-HTML-CSS-3%EC%9B%94-8%EC%9D%BC-%EC%A0%95%EB%A6%AC%EC%A4%91


📝 flexbox

📌 4 steps

  1. 선언 ! 나 플렉스 박스 쓸거임(단호)
    👉 정렬하고자 하는 요소를 감싸는 👫부모컨테이너 에게 display: flex;
  1. 가로 정렬? 세로 정렬?
    👉 부모컨테이너에게 flex-direction: row, column;

  2. 무조건 한 줄 안에 다 정렬?
    👉 flex-wrap: nowrap, wrap;

  3. 플렉스 가보쟈고

📌 flex-direction

  • flex-direction: row; 가로 정렬
    cross axis 는 수직으로! 마치 글 읽을때처럼..




  • flex-direction: column; 세로 정렬

📌 flex-wrap

⚡ nowrap

                                   👇

⚡ wrap




📌 justify-content

flex-direction과 같은 방향
즉, 메인 axis 를 기준으로 해서 정렬하고 싶을때 사용

예시 👇 flex-direction: row;

🧀 justify-content: space-between;

🧀 justify-content: space-around;

🧀 justify-content: center;




📌 align-items, align-content

cross axis 를 기준으로 해서 정렬하고 싶을때

🧀 align-items

align-items: center;


여기서 justify-content: center; 을 추가하면 한가운데에 위치시킴!

🧀 align-content


-> 전체적으로 큰 축을 하나로 보는게 align-content
사진1은 (빨,노) (파) 축이 총 두개임.

  • align-content: space-between; 👇

  • align-content: center; 👇

😇 헷갈려서 보통 align-item 하고 안되면 align-content를 한다


💖 order

🥂 아주 유용한 기능


🧚‍♀️ 실습

완료!

그리고 flex를 이용해서 요소를 항상 화면 정가운데에 배치하는 방법

profile
👩‍💻안녕하세요🌞

0개의 댓글