display : flex ;

🎀 display : flex ;

박스 내 요소 간의 공백 배분과 정렬기능을 제공하기 위한 1차원 레이아웃 모델

1차원 레이아웃 모델이라고 불리는 이유는 플렉스박스는 행 또는 열만을 다루기 때문이다.

플랙스박스는 기본적으로 행->>방향으로 요소를 정렬시킨다.

 

= flex 컨테이너 라고도 부른다 (요소들을 포함하기 때문)

컨테이너를 만들기 위해서는 컨테이너에 display : flex; 를 적용해야 한다.

 

 

▼ flex 적용 전

 

 

▼ flex 적용 후

 

flexbox.html

0.00MB

 

 

---

 

 

실습

 

▼ <div class="container">  컨테이너 클래스는 아무성질도 가지고있지 않다. 클래스명만 부여해줌.

 

▼  .container { display: flex; } 컨테이너 클래스에 디스플레이 플렉스 스타일추가. 

     자식요소가 가지고있는 기본 마진값을 무시하고 자신의 진행방향(행방향->)으로 요소를 나열함.

     요소 진행방향을 바꾸고 싶다면 flex컨테이너의 다른속성을 추가해주어야 한다.

 

 

---