[CSS] 요소 배치 : flex box

🔻flex box🔻

• display: flex
• flexiable box
• 레이아웃 작성할 때 사용한다.
• 내부의 요소를 배치한다.
• float + position + margin + padding

---

🔶기본 상태(display: flex)

• 메인축(아이템을 나열하는 방향) : 가로
• 수직축(메인축의 직각 방향) : 세로 
• 아이템 너비 : 요소만큼
• 아이템 높이 : 부모만큼

---

🔶속성

1. flex-direction

• 아이템의 배치 방향을 설정한다.
• 초반에 설정한다.
• row (기본값) : 행을 메인축으로 
• column : 열을 수직축으로
• flex-direction : row

 

2. flex-wrap

• 자동 줄바꿈
• 잘 사용하지 않는다.
• flex-wrap: wrap (기본값)

 

flex 관련 속성명

1. justify-

메인축 방향

2. align-

: 수직축 방향

 

3. justify-content

• 메인축 방향으로 아이템을 어떻게 정렬할지 설정한다.
• fiex-start : 주 축의 시작 부분에 정렬
• flex-end : 주 축의 끝 부분에 정렬
• center : 주 축의 가운데에 정렬
• space-between : 첫 번째 요소는 시작 부분에, 마지막 요소는 끝 부분에 정렬되며, 나머지 아이템들은 동일한 간격으로 분산 배치된다.
• spcae-around : 요소들을 균등한 간격으로 분산 배치하되 양 끝에는 반 간격을 둔다.
  • 맨앞, 맨뒤 간격은 요소 사이 간격의 반
• space-evenly : 모든 간격을 동일하게 띄우고 정렬

 

4. align-items

• 수직축 방향으로 아이템을 어떻게 정렬할지 설정한다.
• justify-content의 반대
• stretch(기본값) : 요소들의 높이를 교차 축의 길이로 늘린다.
• center : 교차 축의 가운데에 정렬
• flex-start : 교차 축의 시작 부분에 정렬
• flex-end : 교차 축의 끝 부분에 정렬
• baseline : 텍스트 기준선에 정렬

 

 

배치

[공통 코드]

    <div id="box">
        <div class="item">1. 딸기</div>
        <div class="item">2. 바나나</div>
        <div class="item">3. 포도</div>
        <div class="item">4. 사과</div>
        <div class="item">5. 수박</div>

    </div>

    <style>
        #box .item:nth-child(1) {background-color: tomato;}
        #box .item:nth-child(2) {background-color: orange;}
        #box .item:nth-child(3) {background-color: gold;}
        #box .item:nth-child(4) {background-color: greenyellow;}
        #box .item:nth-child(5) {background-color: dodgerblue;}
    </style>

 

 

1.  display: inline

    <style>
        #box {
            border: 10px solid black;
            font-size: 0px;
        }
        
        #box .item {
            display: inline;
            font-size: 1rem;
        }
    </style>

 

 

2.  ::after

    <style>
        #box {
            border: 10px solid black;
        }
        
        /* 부모가 자식을 인식하도록 한다. */
        #box::after {
            content: '';
            display: block;
            clear: both;
        }
        
        #box .item {
            float: left;
        }
    </style>

 

 

3. overflow: hidden

    <style>
        #box {
            border: 10px solid black;
            overflow: hidden; /* 아래 #box::after 역할을 한다.*/
        }
        
        #box .item {
            float: left;
        }

    </style>

 

 

4. display: flex;

    <style>
        #box {
            border: 10px solid black;
            display: flex;
        }

    </style>

 

 

 

 

 

 

 

 

🔻flex 속성배우기🔻

개구리 게임

https://flexboxfroggy.com/#ko

Flexbox Froggy