[Bootstrap] Flex 플렉스, 흘러내린다.

박스의 형태를 flex 로 정의함.

d-flex, d-inline-flex

<div class="d-flex">
	<div>공간1</div>
	<div>공간1</div>
</div>

부모영역의 왼쪽부터 표시된다.

 

<div class="d-inline-flex">
	<div>공간1</div>
	<div>공간1</div>
</div>

부모영역도 줄어든다.

 

자식 배열을 "열로" or "줄로" 할지 정할 수 있다.

flex-row, flex-row-reverse, flex-column, flex-column-reverse

 

 

박스의 좌우를 기준으로 자식박스를 정렬한다.

<div class="d-flex justify-content-center">
	<div>공간1</div>
	<div>공간1</div>
</div>

justify-content-start

justify-content-center

justify-content-end

justify-content-between 양쪽끝 여백없이 좌우정렬

justify-content-around 모든 여백을  동일하게 정렬

 

<div class="d-flex flex-wrap">
	<div>공간1</div>
	<div>공간1</div>
</div>

자식영역 내용이 많더라도 줄바꿈을 하지 않는다.

 

justify-content-start 형태와 비슷한 요소들

 

 

부모박스의 상하를 기준으로 자식정렬 방법 (넘치는 경우 다음줄에 표시됨)

align-content-start

align-content-end

align-content-center

align-content-baseline

align-content-stretch

 

부모박스의 상하를 기준으로 오직 한줄로 표시해서 자식정렬 방법 (오직 한줄)

align-items-start

align-items-end

align-items-center

align-items-baseline

align-items-stretch

 

자식이 직접 정렬

align-self-start

align-self-end

align-self-center

align-self-baseline

align-self-stretch

 

위의 태그는 "d-flex" 를 적용해야 한다.

 

 

flex-fill