CSS Flex

Window >> MAC
vs code >> webstorm 변경
앞으로 front-end를 좀더 편리하고 효율적으로 하기위해

webstorm
onpython.cafe24.com 서버를 연결하여 사용

http://localhost:63342/onpython_html/htmltest/code/index.html를 메인페지로 사용하여 그리드 나누기

flex의 html 구조
CSS Flex
flex는 flexible box, flexbox라고 부른다.
flex는 레이아웃 배치 전용 기능으로 고안되었다.

<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
	<div class="item">helloflex</div>
</div>

부모 요소인 flex container
자식 요소인 flex item 으로 구성

컨테이너 flex의 영향을 받는 전체 공간, 설정된 속성에 따라 각각의 아이팀들이 어떤 형태로배치되는 것

flex의 속성은 컨테이너에 적용하는 속성, 아이템에 적용하는 속성

.container {
	display: flex;
}

컨테이너에 display:flex를 입력하면 flex가 적용된다
기존에는 새로로 출력되는 것을 볼 수 있었는데 flex 아이템들은 가로방향으로 배치되고,
자신이 가진 내용물의 width 만큼만 공간을 차지한다.

float : lefet 을 사용하면 박스의 크기들이 일정하지 못한다.
하지만 flex를 사용하면 컬럼의 높이가 자동으로 맞게 적용 된다.

배치 방향 설정
flex_direction

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

row >>>> 왼쪽에서 오른쪽
row-reverse <<<<< 오른쪽에서 왼쪽
column 위에서 아래로
colum-reverse 아래에서 위로

줄넘김 처리 설정
flex-wrap

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

컨테이너가 더 이상 아이템들을 한줄에담을 여유 공간이 없을때
아이템 줄바꿈을 어떻게 할지 결정하는 속성
nowrap 줄바꿈 x 넘으면 옆으로 나간다
wrap 줄바꿈 o 넘으면 아래로 내려간다.
wrap_reverse 줄바꿈 o 아이템을 역순으로 이동한다.

flex_flow

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

justify 메인축으로 방향 정렬
align 수직축으로 방향정렬

메인축 방향 정렬
justify-content

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

flex-start 아이템들을 시작점으로 정렬
flex-end 아이템들을 끝점으로 정렬
flex-center 아이템들을 가운데로 정렬
space-between 아이템들의 '사이'에 균일한 간격을 만들어줌
space-around 아이템들의 '둘레'에 균일한 간격을 만들어줌
space-evenly 아이템들의 사이와 양 끝에 균일한 간격을 만들어줌 주의! edge 지원안됨

수직축 방향 정렬
align-items

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}

flex-stretch 아이템들이 수직축 방향으로 끝까지 쭉 늘어남
flex-start 아이템들을 시작점으로 정렬함
flex-end 아이템들을 끝점으로 정렬함
center 가운데로 정렬
baseline 텍스트 베이스라인 기준으로 정렬

유연한 박스의 기본 영역
flex-basis

.item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

flex-basis는 flex 아이템의 기본크기를 설정
flex-basis 100px으로 하면 100px로 지정되고 크기가 더큰 것 그대로 유지
반면 width 100px을 설정하면 원래 100px 넘는 것도 100px로 맞춘다.