개발/CSS

플렉스 박스

에크키키 2022. 9. 6. 23:42

 

 

플렉스 박스 레이아웃

  • 그리드 레이아웃을 기본으로, 플렉스 박스를 원하는 위치에 배치하는 것
  • 여유 공간에 따라 너비나 높이,위치를 자유롭게 변형할 수 있음

1.플렉스 컨테이너

웹문서에 텍스트나 이미지, 표 등 웹 요소들을 플렉서블하게 사용하려면 먼저 플레스 컨테이너로 묶어줘야함

 

2.플렉스 항목

플렉스 컨테이너에 담기는 웹요소

 

3.주축 

플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본방향

기본적으로 왼쪽 ->오른쪽, 수평방향으로 배치

주축에서 플렉스항목이 배치되기 시작하는 지점을 '주축시작점',

배치가 끝나는 지점을 '주축 끝점'이라고 함

 

4.교차축

주축과 교차되는 방향,  기본적으로 위->아래 배치

교차축에서 배치가 시작되는 지점을 '교차축 시작점'

배치가 끝나느 지점을 '교차축 끝점'이라고 함

 

 

display 속성

배치 요소들을 감싸는 부모요소를 플렉스 컨테이너로 지정(배치하려는 웹요소들을 감싸는 부모요소를 만들어야함)

  • display: flex         플렉스 박스를 박스레벨요소로 정의
  • display:inline-flex 플렉스박스를 인라인 레벨요소로 정의
<style>
	#container{display:flex;}
</style>
<div id="container>   /*플렉스 컨테이너*/
	<div></div>      /*2개의 플렉스항목*/
	<div></div>
</div>

 

flex-direction 속성

플렉스 항목 방향 지정, 기본값 row

  • row : 주축 가로, 교차축 세로로 지정. 플렉스항목은 주축 시작점에서 끝점(왼쪽에서 오른쪽)배치
  • row-inverse:  주축 가로, 교차축 세로로 지정 .플렉스항목 끝점에서 시작점으로
  • column:주축 세로, 교차축 가로로지정. 플렉스항목은 주축시작점에서 끝점(위쪽에서 아래쪽)배치
  • column-inverse:주축 세로, 교차축 가로로지정.플렉스항목은 주축 끝점에서 시작점(아래쪽에서 위쪽)배치
<style>
        #container {
            display: flex;
            flex-direction: column;
            border: 2px solid black;
        }
	#container div {
		width: 200px;
		border: 1px solid black;
		background: #ccc;
	}
</style>
</head>
<body>
	<div id="container">
		<div id="box1"><h2>1</h2></div>
		<div id="box2"><h2>2</h2></div>
		<div id="box3"><h2>3</h2></div>
	</div>

flex-direction:column;

 

flex-wrap 속성

플렉스 항목을 한줄 또는 여러줄로 배치

  • no-wrap : 한줄에 표시. 기본값
  • wrap       :여러줄에 표시
  • wrap-reverse : 여러줄에 표시하되 기존방향과 반대로 배치

flex-wrap

 

flex-flow 속성 플렉스 배치방향과 여러줄 배치를 한꺼번에 지정

  • flex-flow: row no-wrap 기본값
  • flex-flow : row;   왼쪽에서 오른쪽으로, 한줄에 표시
  • flex-flow : column wrap;  위에서 아래로, 여러줄에 표시

 

order 속성 플렉스 항목의 배치 순서바꾸기

<style>
	#container {
	display:flex;
	}	
	#box1 {order:2;}   /* box 3 -> box 1 -> box2 순으로 배치 */
	#box2 {order:3;}
	#box3 {order:1;}
</style>
<div id="container">
	<div id="box1"><h2>box1</h2></div>
	<div id="box2"><h2>box2</h2></div>
	<div id="box3"><h2>box3</h2></div>
</div>

 

 

flex 속성 플렉스 항목 크기 조절하기

  • flex-grow(항목의 너비를 늘일지) ,flex-shrink(줄일지),flex-basis(기본크기, 0일경우 앞의 두개값고 함께 사용,auto일경우 플렉스 항목의 너비값을 사용 )
  • initial : 항목의 width/height 값에 의해 크기가 결정, 플렉스컨테이너의 공간이 부족할경우 최소크기까지 줄임
  • auto :항목의 width/height 값에 의해 크기가 결정, 플렉스컨테이너의 공간에 따라 늘이거나 줄임.
 #box1 { flex: 1 1 0; } /* 늘이거나 줄이지 않음*/
 #box2 { flex: 2 2 0; } /* 2배 늘이거나 2배 줄임 */
     

 

플렉스 항목배치를 위한 속성들

 

justify-content 속성 플렉스 항목을 주축 방향으로 배치할때의 기준

  • flex-start : 주축의 시작점을 기준으로배치
  • flex-end : 주축의 끝점을 기준으로 배치
  • center : 주축의 중앙을 기준으로 배치
  • space-between :첫번째,마지막 항목은 시작점과 끝점에 배치, 중앙항목들은 같은간격으로 배치
  • space-around : 모든 항목들을 같은 간격으로 배치

 

 

align-item속성  교차축을 기준으로 하는 배치 방법 조절

  • stretch : 플렉스 항목을 확장해 교차축을 꽉 채움, 기본값
  • flex-start: 교차축의 시작점을 기준으로 배치
  • flex-end :교차축의 끝점을 기준으로 배치
  • center:교차축의 중앙을 기준으로 배치
  • baseline: 시작점과 글자기준선이 가장 먼 플렉스 항목을 시작점에 배치하고 그 글자의 기준선과 다른항목의 기준선을 맞추어 배치. (그림에서 2번의 글자크기가 가장크기때문에 기준선또한 가장 멀리 떨어져있으므로 시작점에 배치)

 

 

align-self

교차축을 기준으로 배치하는데 플렉스 항목을 개별적으로 배치함. 플렉스 항목자체의 스타일로 지정

auto(플렉스 항목의 부모속성값을 상속받음),stretch,flex-start,flex-end,center,baseline

<style>
  #container {
	display: flex;
	align-items:center;
  }			
   #box1 {align-self:flex-start;} /*첫번째박스만 교차축의 시작점에 배치*/
</style>

 

 

 

align-content 

여러줄일때의 배치방법 

justify-content의 속성값과 같음 flex-start, flex-end,center,space-between,space-around

저작자표시 (새창열림)