[0417] Flex & Grid 총정리

💸 Flex

flex-direction, justify-content, align-items 속성만 주구장창 사용했었는데, 새로운 속성들을 알게 되었다!

order

• 출력 순서를 변경할 때 사용
• 기본값은 0이고, 작은 값이 있는 요소부터 출력한다
• 음수도 가능

<div class="container">
  <div id="three">3</div>
  <div id="one">1</div>
  <div id="four">4</div>
  <div id="five">5</div>
  <div id="two">2</div>
</div>

/* order 적용 */
#one { order: 1; }
#two { order: 2; }
#three { order: 3; }
#four { order: 4; }
#five { order: 5; }

---

align-self

• align-items와 다르게 개별 요소에 적용할 수 있는 속성

<div class="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
</div>

.container {
    display: flex;
    align-items: flex-start; /* a, b, c, d - container 최상단 */
}

#b, #d {
    align-self: flex-end; /* b, d - container의 최하단으로 이동 */
}

---

align-content

• 여러 줄 사이의 간격을 지정
• flex-wrap: wrap;인 경우에만 사용 가능

인자	align-items	align-content
flex-start
center

---

+) flex-flow

• flex-direction과 flex-wrap을 한 번에 작성 가능!
• 공백을 이용하여 두 속성의 값을 구분한다

flex-flow: column wrap; /* flex-direction: column; flex-wrap: wrap; */

flex-flow 적용 전	flex-flow 적용 후

---

참고 자료

Flexbox Froggy

---

🏁 Grid

나는 grid보다 flex가 편하고 좋아서, grid를 잘 쓰지 않고, 속성은 매번 헷갈렸는데 이번 기회에 정리를 해보자!! 😏

그리드는 2차원 레이아웃으로, 행과 열을 이용하여 요소를 배치할 수 있다.

grid-template-columns

• 각 열의 넓이를 정한다
• fr, px, em, % 등으로 작성

.container {
    display: grid;
    grid-template-columns: 10% 50px 10rem 1fr 2fr;
}

🤓 repeat 함수를 이용하면 다음과 같이 간단하게 작성할 수 있음

grid-template-columns: repeat(4, 25%) /* 25% 25% 25% 25% */

😎 fr는 Grid는 새로운 단위예요.

ex) 두개의 element들을 1fr과 3fr로 설정시, 공간이 4개의 동일한 크기로 공유됩니다.
첫번째 element는 1/4, 두번째 element는 3/4 크기를 차지_

---

grid-template-rows

• 각 행의 넓이를 정한다
• grid-template-columns와 사용법 동일

---

grid-template

• grid-template-rows + grid-template-columns
• /로 구분

.container {
    display: grid;
    grid-template: 1fr 2fr / 10% 50px 10rem 1fr 2fr;
    /*
      grid-template-columns: 10% 50px 10rem 1fr 2fr;
      grid-template-rows: 1fr 2fr;
    */
}

---

grid-column

• grid-column-start + grid-column-end
• 시작하는 열, 끝나는 열 지정
• /로 구분
• 음수 값을 넣으면 마지막에서부터 셈

.container > div {
    /*
        grid-column-start: 2;
        grid-column-end: 4;
    */
    grid-column: 2 / 4;
    grid-row: 2 / span 2;
}

그리드 형태	선택된 부분

🤓 span을 이용하여 열 또는 행의 넓이를 지정할 수 있어요!

grid-column-end: span 2; /* 넓이가 2 */
grid-column-start: span 3; /* 넓이가 3 */

💡 인수는 line을 의미합니다.

---

grid-row

• grid-row-start + grid-row-end
• 시작하는 행, 끝나는 행 지정
• grid-column과 사용법 동일

---

grid-area

• grid-row + grid-column
• grid-row-start, grid-column-start, grid-row-end, grid-column-end순으로 입력
• 슬래쉬(/)로 구분

.container > div {
    grid-area: 2 / 2 / span 2 / 4;
    /* grid-row: 2 / span 2; grid-column: 2 / 4; */
}

---

order

• flex의 order와 사용법 동일
• 출력 순서를 변경할 때 사용

#hi {
    order: 1;
}

order 적용 전	order 적용 후

---

참고 자료

Grid Garden