2교시
------------------
flex box
행 또는 열 주축 설정을 해줌 .
웹 요소 배치 정렬하는 1차원 레이아웃 방식
conatiner ( 부모)
레이아웃을 결정할 요소
div class a
div class b / div
div class b / div
/div
flex item (flex 컨테이너 안에 있는 박스) (자식
display : flex
컨테이너에 사용
flex 축방식
주축 가로형
교차축 새로세로 형
주축을 병경도 가능
웹 퍼플리셔, 디자인
가장 중요한 것은 기획
코드 가장 중요한 것은 기획
코드는 자신이 편하게 사용하면 되고
그것에 대해서 Css 에서 만들어 다 구현될 수 있도록 만들음
블럭 박스 내부 박스들은 width 최대치
flex 박스 내부 박스들
flex - direction
주축의 방향성을 결정
기본은 row (행)
flex - wrap
item 들이 강제로 한줄에 배치할 것인지
가능한 영역내에서 벗어나지 않게
여러 행으로 나누어 표현 할 것인지 결정
wrap
공간이 부족해 지면
여러 행으로 배치된다
flex - flow
direction wrap 을 한번에 사용가능 속성
direction wrap
*justify - content
박스들이 주축 따라 배치될때 요소사이의 공간 분배
flex - start : 기본
flex - end : 주축의 끝점으로 부터 시작점을 향해
center : 주축의 중심
space-between
추축에 양 끝 배치 내부 간격 동일
space-around:
동일 여백
space-evenly
모든 여백 동일
align- items
교차축으로 정렬
align-self
개별요소 (자식)
교자축 정렬
wrap 정렬
flex-grow
flex item 이 기본 크기에 대해서 더 커질수 있다,
1 0 0 3
145 100 100 235