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



프리랜서 웹디자이너 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;







==============================================================================
FLEX


가로정렬
flex-direction:row
flex-direction:row-revers
flex-direction:column
flex-direction:column-serverse
http://relation.co.kr/images_board/board_system_publishing/187/test1.html




세로정렬
justify-content:flex-star 시작점에 맞춰 정렬 (가로일경우 왼쪽, 세로일 경우 위)
justify-content:flex-end 끝점에서 맞춰 정렬
justify-content:center 가운데정렬
justify-content:space-around 자식요소들의 여백을 균등하게 정렬
justify-conyent:space-beteen 여백을 균등하게 정렬


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


http://relation.co.kr/images_board/board_system_publishing/187/test2.html




수직방향 여백을 두는 방식
align-items 수직 방향 여백을 두는 방식
vartical-align 속성과 유사

align-items : flex-start
align-items : center
align-items : flex-end

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




flex-wrap
공간이 좁아질 때 줄 바꿈 여부
flex-warp:nowrap 기본적으로 폭이 좁아지면 정해 놓은 사이즈도 무시하고 같이 좁아지면서 줄바꿈이 되지 않아요
flex-warp:wrap 정해 놓은 사이즈를 유지한채 줄바꿈



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

http://relation.co.kr/images_board/board_system_publishing/187/test4.html


.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가 자동적으로 정해진다.




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

https://jhc9639.blog.me/220984499817

이 포스트 공유하기

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