레이아웃을 정돈하기 위해서는 float나 margin:0 auto;를 사용하고 있었습니다만, Flexbox가 매우 편리했기 때문에 비망록으로 투고합니다.

참고> htps : // 코 s. 코 m / r 치 c ぇ s / 부이 ld ぇ b하여 s / 오페라 치온 / cs / cs 3-f ぇ x 보라 x-p 로페 치에 s-by-s 이 tch. HTML

Flexbox의 장점

flexbox란, 「간단하게 좋은 느낌의 레이아웃으로 할 수 있는 css의 구조」
float 및 margin:0 auto;와 다른 이점이 있습니다.

・복잡한 내용을 상하 좌우에 간단하게 레이아웃 가능
··높이가 사라지지 않고, clearfix가 불필요
・HTML 소스는 그대로, CSS만으로 순서를 바꿀 수 있습니다
· 중앙 정렬, 균등 분포 등의 화상 소프트웨어로 행하는 것 같은 정렬을 HTML상에서 간단하게 실현 가능
・부모나 아이의 사이즈가 확대 축소해도, 그 공간에 따라 유연성 높아 레이아웃이 가변한다

등등

Flexbox의 주의점

・오래된 브라우저라면 비대응
　・IE에서는 최신판에서도 거동이 이상한 경우가 있다

Flex 컨테이너와 Flex 아이템

Flex 레이아웃은 크게 나누어 2 종류의 요소로 나누어져 있어 각각 설정할 수 있는 프로퍼티가 다릅니다.

Flex 컨테이너

Flex 레이아웃을 실시하기 위한 부모의 상자입니다. 아래 예에서 소개합니다만 display:flex로 설정하는 것으로 Flex 컨테이너가 됩니다.

Flex 아이템

Flex 컨테이너 바로 아래의 요소는 모두 자동으로 Flex 아이템이 됩니다.
※Flex 아이템 내에 더 div가 포함되는 등, 중첩되어 있는 아이템은 Flex 아이템이 되지 않습니다.

기본 flex 레이아웃

html

<div class="flex">　/* flexコンテナー */
    <div>1</div>　/* flexアイテム */
    <div>2</div>　/* flexアイテム */
    <div>3</div>　/* flexアイテム */
</div>

css

.flex {
    background-color: grey;
    display:flex;
}
.flex > div {
    background-color: white;
    margin: 10px 10px;
}

그러면
이런 느낌

이 부모 요소 (.flex)의 CSS에 display : flex;를 추가합니다.

css

.flex {
    background-color: grey;
    display:flex;/* 追加 */
}
.flex > div {
    background-color: white;
    margin: 10px 10px;
}

이것만으로 쉽게 가로 레이아웃을 만들 수있었습니다.

더 추가합니다.

css

.flex {
    background-color: grey;
    display:flex;
    justify-content: center;/* 追加　*/
    align-items: center;/* 追加 */

}
.flex > div {
    ~省略〜
}

이런 식으로 쉽게 레이아웃을 변경할 수 있습니다.

요약

편리한 Flexbox 덕분에 덕분에 예상대로 레이아웃이 훨씬 쉬워졌습니다.
이 기사에서 소개할 수 없었던 속성이 아직 많이 있으므로, 또 다른 기사에서 쓰고 싶습니다.

게임에서 flexbox를 배울 수 있으므로 추천
htps : // f ㅇ x 보 xf 로 gy. 이 m/#