프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[CSS] SD_06 flex, flexbox 반응형 웹을 위한 css 레이아웃 속성 정리

2022.10.18
북마크 [출처 이동]    작성자 정보
첨부이미지(0/4)
flex는 flexible의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다.
아래 코드는 div를 수평, 수직 중앙정렬하게 만듭니다.
- display:flex를 하게되면 직계자식요소들이 영향을 받게 됩니다 .
- 여기서 display:inline-flex를 하게 되면 직계자손요소들을 감싸고 있는 부모요소가 inline성질을 가지게 됩니다. 
<style>
 div { display: flex; align-items: center; justify-content: center;}
</style>


http://relation.co.kr/images_board/board_system_publishing/187/index.html
http://relation.co.kr/images_board/board_system_publishing/187/index1.html
http://relation.co.kr/images_board/board_system_publishing/187/index2.html
http://relation.co.kr/images_board/board_system_publishing/187/index3.html

==============================================================================
FLEX 기본 구조


배치방향설정 
가로정렬 
flex-direction:row (기본값)
flex-direction:row-revers    
flex-direction:column   
flex-direction:column-serverse
 
줄넘김 처리 설정
flex-wrap   
공간이 좁아질 때 줄 바꿈 여부
flex-warp : nowrap;  기본적으로 폭이 좁아지면 정해 놓은 사이즈도 무시하고 같이 좁아지면서 줄바꿈이 되지 않음.  넘치면 삐져 나감
flex-warp : wrap;    정해 놓은 사이즈를 유지한채 줄바꿈.
flex-wrap : wrap-reverse;   줄바꿈 역순배치


flex-flow
flex-direction과 flow-wrap을 한꺼번에 지정 할 수 있는 단축 속성
flex-direction, flex-wrap의 순으로 한칸씩 떼고 작성
.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}


=================================================================================================
세로정렬
메인축 방향으로 아이템을 정렬하는 속성.
justify-content : flex-star       (기본값)시작점에 맞춰 정렬 (가로일경우 왼쪽, 세로일 경우 위)
justify-content : flex-end       끝점에서 맞춰 정렬 flex-direction이 row(가로배치)일 때는 오른쪽,  column(세로배치)일 때는 아래
justify-content : center         가운데정렬
justify-conyent : space-beteen  자식요소 사이(between) 간격 여백을 균등하게 정렬
justify-content : space-around  자식요소 둘레(around) 여백을 균등하게 정렬
justify-content : space_evenly  자식요소 사이와 양 끝에 균일한 간격을 만듦  (IE, Edge 지원 안됨)
.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}


수직 방향 정렬
align-items   수직 방향으로 아이템을 정렬하는 속성
vartical-align 속성과 유사

align_items : stretch     부모의 여백만큼 자식요소 영역의 수직적인 길이를 판단하여 끝까지 쭉 늘려준다. (default)
align-items : flex-start  자식요소의 영역은 그대로 내비두고 시작점으로 정렬
align-items : flex-end   자식요서의 영역은 그대로 두고 끝으로 정렬
align-items : center      중앙정렬
align-items : baseline    아이템들을 텍스트 베이스라인으로 정렬합니다.
.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}


여러행 정렬
align-content

flow-warp:wrap; 이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성입니다.
.container {
	flex-wrap: wrap;
	align-content: stretch;
	/* align-content: flex-start; */
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}


가운데 정렬
===============================================================================
displsy:flex;
align-items:center;
justify-content:center

.container {   display: flex; } 
.container .flex1 {  flex: 1; }
.container .flex2 { flex: 2; }
이렇게 하면 컨테이너 안의 flex1은 1/3만큼, flex2는 2/3만큼 채워지게 된답니다. 

flex-diection: column
을 통해 가로정렬 기준을 세로 정렬로 만들 수 있습니다.  
여러가지 값들을 이용해서 세로정렬하는 순서, 반대 등으로 설정할 수도 있습니다.

flex-shrink: 1
display:flex안의 있는 자식 요소들에 대해 얼마나 많이 줄어들까에 대한 속성값. 
크기가 증가할 수록 그 자식요소의 너비는 감소하게 된다. 

문법
< flex-shrink> ||
flex-grow: 얼만큼의 영역을 가질지를 정한다. 음수는 유효하지 않으며, 디폴트값은 0
flex-shrink: 얼만큼 줄어들지를 정한다. 음수는 유효하지 않는다. 디폴트는 1 
flex-basis:  처음 시작할 때의 사이즈를 정한다. 100px, 은 width가 100px로 시작된다. 디폴트는 auto
display: flex를 하고 자식요소의 flex를 설정하는데.. 
flex:auto; flex-grow가 자동적으로 정해진다.  


출처 
http://blog.naver.com/PostView.nhn?blogId=nsoft21&logNo=221558782515&parentCategoryNo=&categoryNo=13&viewDate=&isShowPopularPosts=false&from=postView
https://jhc9639.blog.me/220984499817

이 포스트 공유하기

전체목록