프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

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

2018.01.02
flex는 flexible의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다.


display: flex;
align-items: center;
justify-content: center;


이렇게 하면 물체가 수평, 수직 중앙정렬이 된답니다.
display:flex를 하게되면 직계자식요소들이 영향을 받게 됩니다 .
여기서 display:inline-flex를 하게 되면 직계자손요소들을 감싸고 있는 부모요소가 inline성질을 가지게 됩니다.

이외에도 중앙정렬을 하는 CSS방법은 많습니다. table-cell 을 이용하거나 transform을 이용해서 가로, 세로 정렬을 합니다.

크로스브라우징을 생각하면 flex를 못씁니다. 그걸 생각한다면 positoin absolute를 씁니다. 바로 아래처럼 말이죠. 이렇게 한다면 세로, 가로 정렬이 됩니다.



position:absolute;
width: 200px;
height:200px;
top:0;
left:0;


justify-content
justify-content는 수평정렬을 담당하는 녀석으로
- flex-start : 영역안의 시작부터(default)
- flex-end : 영역안의 끝부터
- center: 영역의 중앙
- space-between: 아이템을 양쪽끝에 맞춰정렬
- space-around: 양쪽끝을 정렬, 각 아이템 전, 후에 일정한 가격의 공간을 만듬 라는 값들을 가지고 있답니다.

align-items
align-items는 수직정렬을 담당하는 녀석으로
- stretch : 영역의 수직적인 길이를 판단하여 늘려준다. (default)
- flex-start: 늘리긴 커녕 그대로 내비두고 수직 맨 처음부터
- flex-end: 위와 같으나 수직 맨 끝부터
- center: 중앙
- baseline: flext-start와 비슷하나 자식영역의 컨텐츠의 baseline을 기준 라는 값들을 가지고 있답니다.




flex를 이용한 너비채움






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

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3515
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3522
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2172
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20768
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 59
225 [소스] Window.scroll() 꿘쓰 2020.06.22 63
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 172
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 325
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 352
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 616
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 582
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 688
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 673
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 877
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 627
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 669