일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- array
- 멋사
- 타입스크립트
- 웹개발
- 프론트엔드
- 자바스크립트
- 화살표함수
- 코딩
- 멋쟁이사자처럼
- likelion
- frontend
- 제주코딩베이스캠프
- react
- 비동기
- 내일배움카드
- useState
- CSS
- 네트워크
- VAR
- 메소드체이닝
- for문
- JavaScript
- 개발자
- 이벤트루프
- 리액트
- 반복문
- 배열
- SS
- Let
- 국비지원
- Today
- Total
Ch.Covelope
CSS : flex 노트정리. 본문
flex는 인터페이스 안에 아이템 간 공간 배분 기능을 위한 1차원(행이나 열) 레이아웃 모델이며
2차원인 grid와 대조된다.
flexbox 에는 두 개의 축이 있다.
주축은
flex-direction 이며 4개의 값이 있다,
- row
- row-reverse
- column
- columm-reverse
row , row-reverse 는 인라인 방향 행을 따른다.
column , column-reverse 는 블록 방향을 따른다.
교차축
교차축은 주축에 수직방향으로 , 만약 flex-direction(주축)이 row 나 row-reverse 면 교차축은 열(colum) 방향이다.
주죽이 colmn 방향이면 교차축은 행(row) 방향을 따른다.
정리
주축이 row 면 교차축은 column
주축이 column 이면 교차축은 row
주축과 교차축은 서로 반대.
flex 컨테이너
문서영역에서 flexbox가 놓인 곳을 flex 컨테이너라고 부르는데 영역내의 컨테이너 요소에 display:flex 또는 lnline-flex 로 지정한다. 이 값이 지정되면 컨테이너의 1차 자식요소가 flex 항목이 된다.
flex 컨터이너를 생성하면 flex 아래 자식들은 기본값을 같는다.
- 항목은 행으로 나열됨 (flex-direction 의 기본값은 row)
- 항목은 주축의 시작 선에서 시작. (flex-strat 지점)
- 항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있다.
- 항목의 교차축은 요소의 크기에 맞게 늘어난다.
- flex-basis 는 auto
- flex-wrap 은 nowrap
flex 항목들은 주축의 따라서 정렬되며 내부 크기가 컨테이너의 크기보다 크면 줄바꿈이 되어 내려오는게 아니라 주축 방향으로 흘러 넘치게 된다. 그리고 어떤 항목이 다른 항목보다 높이값이 크면 다른 모든 항목들은 긴 항목에 맞게 교차축을 따라 늘어난다.
flex-direction
flex 컨테이너에 flex-direction 속성을 지정하면 flex 항목이 나열되는 방향을 변경 할수 있는데 . row . row-reverse 는 행으로 나열되며 reverse 는 row 일때 start지점에서 123 이라면 reversms end 지점에서 321 이렇게 나열된다.
column 은 행 방향으로 위에 값과 동일하게 적용된다.
계속 업데이트....
'private' 카테고리의 다른 글
오늘의집 조은님의 Front-end(프론트엔드) 특강 수업! (0) | 2021.11.29 |
---|---|
tailwindcss (테일윈드) 를 사용해서 이력서를 만들어 보자! (0) | 2021.11.24 |
자판기 만들기 과제. (0) | 2021.11.22 |
멋,사 과제 로그인 모달창 만들기.<css 체크박스 디자인 바꾸기> (0) | 2021.11.14 |
간단한 유튜브 <Youtube> 페이지 클론코딩 하기! (0) | 2021.11.09 |