HTML CSS Flexbox

16310 단어 HTML CSS

요소float: left;를 배열하는 데 쓰지만 다른 배열 방법은 없겠지

사이트 참조→https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox1
언제든지 업데이트

Flexbox로 해볼게요.

Flexbox는 Flexible Box Layout Module의 약자입니다.왼쪽에서 오른쪽으로 순서대로 배열하는 것은 말할 것도 없고 오른쪽에서 아래로 자유롭게 요소를 배치할 수 있다.

기본

flex_box01.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ブロックとインライン</title>
    <link rel="stylesheet" href="css/flex_box01.css">
  </head>
<body>
  <div class="container01">
    <div class="item">
      アイテム&ensp;1
    </div>
    <div class="item">
      アイテム&ensp;2
    </div>
    <div class="item">
      アイテム&ensp;3
    </div>
    <div class="item">
      アイテム&ensp;4
    </div>
  </div>
</body>
</html>

flex_box01.css

.container01 {
    display: flex;
}
.item {
    margin: 10px 10px;
    padding: 2px 4px;
    background: #f8dcdc;
}

부모 요소에 display: flex;를 적용하고 하위 요소는 가로로 배열합니다.

Flexbox에서 상위 요소에 지정된 속성

html은 위와 같습니다.

flex-direction: row;

flex_box02.css

.container01 {
    display: flex;
    flex-direction: row;
}
.item {
    ~省略~
}

오른쪽에서 왼쪽으로 배열하다

flex-direction: row-reserve;

flex_box03.css

.container01 {
    display: flex;
    flex-direction: row-reverse;
}
.item {
    ~省略~
}

왼쪽에서 오른쪽으로 배열하다

flex-direction: column;

flex_box04.css

.container01 {
    display: flex;
    flex-direction: column;
}
.item {
    ~省略~
}

위에서 아래로 배열하다

flex-direction: column-reverse;

flex_box05.css

.container01 {
    display: flex;
    flex-direction: column-reverse;
}
.item {
    ~省略~
}

아래에서 위로 배열하다

flex-wrap: nowrap;

수량을 늘렸다는 걸 설명하기 위해서.
flex_box02.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ブロックとインライン</title>
    <link rel="stylesheet" href="css/flex_box.css">
  </head>
<body>
  <div class="container02">
    <div class="item">
      アイテム&ensp;1
    </div>
    <div class="item">
      アイテム&ensp;2
    </div>
    <div class="item">
      アイテム&ensp;3
    </div>
    <div class="item">
      アイテム&ensp;4
    </div>
    <div class="item">
      アイテム&ensp;5
    </div>
    <div class="item">
      アイテム&ensp;6
    </div>
    <div class="item">
      アイテム&ensp;7
    </div>
    <div class="item">
      アイテム&ensp;8
    </div>
    <div class="item">
      アイテム&ensp;9
    </div>
    <div class="item">
      アイテム&ensp;10
    </div>
  </div>
</body>
</html>

flex_box06.css

body {
    ~省略~
}
.container02 {
    margin: 10px auto;
    display: flex;
    flex-wrap: nowrap;
}
.item {
    ~省略~
}

줄지어 서다

flex-wrap: wrap;

flex_box06.css

body {
    ~省略~
}
.container02 {
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
}
.item {
    ~省略~
}

하위 요소를 여러 줄로 되돌려 위에서 아래로 배열하다

flex-wrap: wrap-reverse;

flex_box07.css

body {
    ~省略~
}
.container02 {
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap-reverse;
}
.item {
    ~省略~
}

하위 요소를 여러 줄로 되돌려 아래에서 위로 정렬

flex-flow: ;

flex_box08.css

.container02 {
    margin: 10px auto;
    display: flex;
    flex-flow: row-reverse nowrap;
}

한 줄에서 flex-direction 및 flex-wrap 속성을 지정할 수 있습니다.

justify-content: flex-start;

flex_box09.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: flex-start;
}

10개는 이해하기 어려워서 5개를 골랐어요.부모 요소에 빈 공간이 있을 때 하위 요소가 수평 방향에 있는 위치를 지정합니다.flex-start 왼쪽 정렬.

justify-content: flex-end;

flex_box10.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: flex-end;
}

flex-end 오른쪽으로 정렬

justify-content: flex-center;

flex_box11.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: flex-center;
}

flex-center 가운데 맞춤

justify-content: space-between;

flex_box12.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
}

첫 번째 하위 요소를 왼쪽에 놓고, 마지막 하위 요소를 오른쪽에 놓고, 나머지 요소를 고르게 간격을 두다

Reference

이 문제에 관하여(HTML CSS Flexbox), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/a-takano/items/c90f0dbf914a6536dcb6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다