기초) flex 속성 정리

 

 

 

 

먼저 예제 코드를 보자.

 

 

 

<style>
body { padding: 30px;}
* { padding: 0; margin: 0; list-style: none;}


 ul {border: 1px solid red; padding: 20px; }
 ul:after { content:""; display: block; clear:both;}
 li { float:left; width: 20%; border: 1px solid purple; box-sizing: border-box;}
</style>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

 

 

 

 

 

 

 

위 코드는 지난번 공부 했던

float속성을 활용해 정렬시킨

테이블 박스이다.

 

 

float을 사용할 땐

해당 부모 요소의 높이가

사라져 버리는 걸 방지하기 위해

 

 

부모 요소에 필수적으로

: after {content: "";라는

가상 인라인 요소를 만들어

display: bolck; clear:both }

의 값을 주어야 하는 등의

작업을 추가로 해주어야 했다.

 

 

여기까진 좋은데 혹 특정 상황에서

설정한 메뉴의 개수를 줄이거나

늘리는 상황이 오면 각 박스 사이즈를

일일이 계산하고 수정해 넣어야 하는 등

복잡한 부분이 많고 손이 많이 가며

무엇보다 코드가 길고 지저분하다.

 

 

그럴 때flex를 쓴다

 

 

 

---

 

 

 

{ flex : }

 

 

 

 

코드를 보자

 

 

 

ul { display:flex; border: 1px solid red; padding: 20px; }
li { flex:1; border: 1px solid purple;}

 

 

 

위 그림과 동일한 것을 만드는데

코드가 훨씬줄었고무엇보다

유지 보수가 쉽다.

 

 

flex는

가변형 layout에 많이 쓰이는 속성으로

반응형 웹에 사용하기 제격이다.

 

 

일일이 별도의 계산을 하지 않더라도

영역 분할 설정이 쉽고 자동적으로

반응한다.

 

 

 

---

 

 

사용법

 

 

 

 

1. 부모 요소에 속성으로

{display: flex;}를넣고,

 

자식 태그에

{felx: ;}를넣어준다.

 

 

자식 flex:의 값들은

숫자혹은 none이

들어갈 수 있고

 

특정 영역을

:nth-child() { flex: }

라는 제어문으로 제어할 수 있다.

 

 

 

 

샘플 코드

 

ul { display: flex; border:1px solid purple; padding: 20px;}
li { flex: 1; border: 1px solid orange; padding:20px;}
li:nth-child(1) {flex:2;}
li:nth-child(5) {flex: none; width: 100px;}

</style>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

 

 

 

 

 

해석해보면

 

리스트 1번은 블럭 2개의 영역을 차지,

 

리스트 5번은 무슨 일이 있어도

100px을 유지,

 

나머지 2,3,4는 남는 영역을

균등하게 차지한다.

 

 

---

 

 

정렬 기능

 

 

 

샘플 코드

 

 

div { height: 400px; border: 1px solid red;
      display: flex;
      justify-content: center; align-items: center;}

p { width : 300px; height: 100px; border: 1px solid purple;
    padding: 20px; }

<div>
  <p>text</p>
</div>

 

 

 

부모 요소에

justify-content: center;

align-items : center;

를 주면 대상 위치가 센터로 딱!

 

display 속성 값이 flex이기 때문에

화면 사이즈와 상관없이 중심에 있다.