[10] FLEX

FLEX LAYOUT을 만들기 위한 기본적인 HTML 구조

<div class="container"> ➡️ 부모요소/ Flex Container

        <div class= "item">helloflex</div> ➡️ 자식요소/ Flex Item.

        <div class= "item">abc</div>

        <div class= "item">helloflex</div>

</div>

 

Flexd의 속성

- 컨테이너에 적용하는 속성

   * display: flex;

      를 적용하는게 시작

      이 한 줄 만으로 컨테이너 배치 시작

          ➡️ item들은 가로 방향으로 배치, 내용물을 width 만큼만 차지, height는 컨테이너의 높이만큼 늘어남

   * display: flex;
      아이템 배치 보다는, 컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값

- 아이템에 적용하는 속성

 

마저 정리하기