Flex

여기를 참고로 작성함

Flex는 2개의 개념으로 나누어진다.

  1. Container
    Items을 감싸는 부모 요소
    display,flex-flow,justify-content 등의 속성 사용가능
  2. Items
    ITem을 정렬하기 위해선 container가 필수이다.
    order,flex,align-self 등의 속성 사용가능

display

display 속성으로 Flex container를 정의한다.


Attribute Description
flex Block 특성의 Flex Container를 정의(수직 쌓임)
inline-flex Inline 특성의 Flex Container를 정의(수평 쌓임)

display : flex

item
item
item
item

display : inline-flex

item
item
item
item

flex-direction

내부 item이 만들어지는 방향을 설정한다.


Attribute Description
row (default) item이 가로방향으로 출력된다.(좌에서 우로)
row-reverse item이 가로방향으로 출력된다.(우에서 좌로)
column item이 세로방향으로 출력된다.(위에서 아래로)
column-reverse item이 세로방향으로 출력된다. (아래에서 위로)

flex-direction : row (default)

item1
item2

flex-direction : row-reverse

item1
item2

flex-direction : column

item1
item2

flex-direction : column-reverse

item1
item2

flex-wrap

내부 item이 출력되는 방향을 설정한다.


Attribute Description
nowrap (default) 모든 item을 한줄에 출력함.
wrap container에 도달시 item을 줄바꿈하여 출력함.
wrap-reverse item을 wrap의 역방향으로 출력함.

flex-wrap : nowrap (default)

item1
item2

flex-wrap : wrap

item1
item2

flex-wrap : wrap-reverse

item1
item2

justify-content

내부 item의 수평 방향 정렬 방식을 설정한다.


Attribute Description
flex-start (default) 모든 item 은 container 앞쪽에서 부터 배치가 된다.
flex-end 모든 item 은 container 뒤쪽에서 부터 배치가 된다.
center 모든 item 은 container 가운데에서 부터 배치가 된다.
space-between 시작 item은 시작점,마지막 item은 끝에 정렬,나머지 item은 고르게 정렬된다.
space-around 모든 item은 균등한 여백을 포함하여 정렬됨

justify-content : flex-start (default)

item1
item2
item3

justify-content : flex-end

item1
item2
item3

justify-content : center

item1
item2
item3

justify-content : space-between

item1
item2
item3

justify-content : space-around

item1
item2
item3

align-content

내부 item의 수평 방향 정렬 방식을 설정한다.

참고로 align-contentflex-warp:warp 가 세팅 되어 있을때 의미가 있는 값이다.


Attribute Description
flex-start item을 각줄 시작점으로(flex-start)으로 정렬
flex-end item을 각줄 끝점으로(flex-end)으로 정렬
center item을 시작점과 끝점 사이 중간지점에 정렬

align-content : flex-start

item1
item2
item3

align-content : flex-end

item1
item2
item3

align-content : center

item1
item2
item3

order

item의 순서를 설정한다.

Item에 숫자를 지정하고 숫자가 클수록 뒤에 배치된다.

음수로 설정이 가능하다.


Attribute Description default
숫자 Item의 순서를 설정한다. 0

order: -1 ~ 17

order:-1
order:0
order:17
order:9

flex-grow

item의 증가 너비 비율을 설정한다.

숫자가 클수록 서 많은 크기를 가진다.

값이 0일 경우 효과가 없다.


Attribute Description default
숫자 Item의 증가 너비 비율을 설정. 0

item이 총3개 이고 flex-grow의 값이 1 , 2, 1 이라면

flex-grow:1는 25%(1/4)이다.

flex-grow:2는 50%(2/4)이다.

flex-grow:1
flex-grow:2
flex-grow:1

example

flex-grow:1
flex-grow:3
flex-grow:2
flex-grow:5
flex-grow:1
flex-grow:2
flex-grow:4
flex-grow:3
flex-grow:1

flex-shrink

item이 감소하는 너비의 비율을 설정한다.

숫자가 클수록 더 많은 너비가 감소한다.

값이 0일경우 효과가 없음.


Attribute Description default
숫자 Item의 감소 너비 비율을 설정. 1

flex-shrink 는 요소의 너비에 영향을 받기 때문에 계산하기 어렵다.

width, height, flex-basis 등 영향을 받는다.

그냥 계산 까다로우니까 1(default) 값으로 세팅하고 사용하면됨

flex-basis

item의 기본 너비를 설정한다.

값이 auto 일 경우 width, height 등 속성으로 item의 너비를 설정 가능.

단위 값이 있을 경우 설정할 수 없음.


Attribute Description default
auto 가변 item과 같은 너비 auto
단위 px, em, cm 등 단위로 지정

item 너비는 width 로 정의 가능 하지만 flex를 사용하면 flex-basis를 사용하여 너비 지정이 가능함.

flex-basis:150px
flex-basis:200px
flex-basis:250px

example

150px
200px
250px
200px
150px
100px
50px
200px
150px

flex

item의 크기(증가, 감소, 기본)을 설정하는 단축 속성 입니다.

타이틀h1

설명입니다.

설명입니다2.

  1. 제목
    설명
  2. 제목
    설명
h5입니다.
파란박스입니다.
code 태그 입니다
					
					java pre 입니다.
					console.log('kim.constructor', kim.constructor);
					
					
					
					<!DOCTYPE html>
					<html lang="ko">
					<head>
					    <meta charset="UTF-8">
					    <title>자바스크립트 사용방법</title>
					    
					    <!-- 외부 파일로 로드하는 방법-->
					    <script type="text/javascript" src="javascript.js"></script>
					    
					    <!-- script 태그 사이에 기술하는 방법-->
					    <script type="text/javascript">
					        document.write("hello");
					    </script>
					</head>
					<body>
					    <!-- 태그에 직접 기술하는 방법 -->
					    <input type="button" onclick="alert('hello')" value="hello">
					</body>
					</html>
					
					
					
					* {font-size:1;}