CSS Flex

 

Flex 정의
display:flex	- 익스 10이하에서 안됨, ie11에서 여러가지 버그이슈가 있지만 대응가능 - float보다 유연하게 레이아웃 배치 가능 - 모바일, 반응형 레이아웃에서 주로 사용 - 요소의 순서변경등 레이아웃의 변화가 많을경우 편함(flex-direction, flex-wrap, order) - ie11 지원이 2022년 6월에 종료되며 앞으로 개발되는 신규사이트들은 ie11 크로스브라우징을 하지않는경우가 늘어나고있음 - 좌우, 상하 배치하는 모든 레이아웃에 사용가능 - 수직정렬시 flex사용하면 쉽게 가능(align-items:center)
display:flex 이슈	- flex로 컬럼레이아웃 잡을경우 좌우 여백 주면 flex아이템은 크기가 줄어듬(flex-shrink:1이므로) ex. .box_wrap {display:flex;} 두컬럼일경우 .box_wrap li {width:50%;} 두번째 컬럼에서 여백주면 여백크기만큼 가로가 줄어듬(flex-shrink:1이므로)  .box_wrap li + li {margin-left:40px;} - flex아이템의 가로는 width로 잡는것이 편함 이유: flex-basis사용시 overflow:hidden 없을경우 지정한 크기만큼 줄어들지않음 - 부모가 flex이면서 flex아이템일 경우 자식요소 좌우 마진, 패딩 %사용시 부모가로가 자식요소 가로만큼 자동으로 잡히지않음 이유: 마진, 패딩 %는 부모의 가로길이 기준이고 flex요소(부모)의 가로는 자식만큼이므로 서로 상충 해결: 자식의 마진, 패딩은 px사용, 또는 부모에서 flex-wrap:wrap
제이쿼리 사용시 이슈	- display:none으로 끈경우 display:flex로 보여줘야함 - 탭내용이 flex일경우 제이쿼리 .hide()메서드로 꺼야함 이유: css display:none사용시 display:block으로 보여지므로
2줄구조	- flex구조에서 한줄일경우 margin적용시 아이템의 크기가 줄어든다 - flex구조가 두줄(flex-wrap:wrap)일경우 margin에 의해 아이템의 크기가 줄어들지않음 - flex구조를 두줄로 하여 좌우여백을 줄경우 padding사용하여 크기안으로 포함되게 해야함
mafin-auto 가능	- flex아이템의 margin에 auto적용시 flex부모의 끝으로 밀려감
버그	- ie11 flex-direction:column 버그있을경우    flex-wrap:wrap, wrap-reverse로 밀어내림 - ie11은 포지션요소를 flex아이템으로 인식하는경우있음(버그)

 

 

flex  컨테이너 (부모)	display:flex
	justify-content : flex-start
	justify-content : space-between	(양쪽 끝으로 정렬)
	justify-content : space-around
	justify-content : space-evenly	( 요소 양쪽간격을 똑같이 배치)	ie11안됨
	align-items:center	한줄 수직정렬
	align-content:center	flex 아이템이 한줄로 배치됨	여러줄 한꺼번에 수직정렬
	flex-direction:column	위아래 배치
	flex-direction:row-reverse	반응형에서 요소 순서 변경될 경우	ie11안됨
flex 아이템 (자식)	align-self:flex-end		부모에 flex를 걸면 크기가 내용만큼 줄어들고 떠있다. > block 으로 변경
	flex: 0 1 auto	0 확대불가 / 1 축소가능 /	부모가 작아지면 같이 작아짐
	-flex-grow, flex-shrink, flex-basis 축약형
	oreder:0	개별요소의 순서변경

 

 

 

float 싹 지우기 

 

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)
자식 요소인 div.item들을 Flex Item(플렉스 아이템)

 

.container {
	display: flex;
	/* display: inline-flex; */
}

 

Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지 = float과 동일

단 부모의 높이가 살아있음

 

flex는 방향개념이 있기때문에 x,y 축이 존재

 

row = float leftrow- reverse = float right 

column : 위아래 

column-reverse : 역순 위아래 

 

flex-wrap: nowrap; : nowrap 기본설정 , 아래로 떨어지지 않음

flex-wrap: wrap; : 줄바꿈아래로 떨어짐 

 

 

 

flex-basis: auto; 기본값 : 내용만큼 width / 특수한 목적이있을때만 사용

flex-grow: 0;  기본값  / 늘리기  커지지 못하게 

flex-grow: 1;  남은 영역을 알아서 키워서 채우기 

 

 

flex 연습사이트

https://flexboxfroggy.com/#ko

 

참고

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자