[css] flexbox

16717 ワード
Flexbox Flex CSS テキストリンク

flexbox


スタイルコンテナに適用されるプロパティ、プロジェクトに適用されるプロパティ


コンテナに適用されるプロパティ
  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
    • プロジェクトに適用されるプロパティ
  • order
  • flex-grow
  • flex-shrink
  • flex
  • align-slef

    • スタイル中心軸(mainaxis)と反対軸(crossaxis)が存在します。

  • 垂直軸および水平軸が存在する.
  • 垂直軸を上下に揃え、水平軸を左から右にnormal-flowに揃えます.
  • 垂直軸が中心軸の場合、水平軸は反対軸となります.△同じ論理でも逆に考えることができる.

    • flexプロパティの整理

    display: flex;:現在のコンテナをflexboxとして指定します.flex-direction
  • flex-direction: column:品物を左に揃えます.(デフォルト)(左から右)
  • flex-direction: column-reverse:アイテムを右揃えにします.(順序変更、右から左へ)
  • flex-direction: column:品物を上を基準に縦に並べます.(上から下へ)
  • flex-direction: column-reverse:物品を以下のように縦に並べます.(順序変更、下から上へ)
    • flex-wrap
  • flex-wrap: nowrap:ウィンドウが小さくなり、一列がいっぱいになり、物のサイズが縮小し、一列に保たれる.
  • flex-wrap: wrap:ウィンドウが小さく、一行がいっぱいになったら、適当な品物を次の行に移動します.
    • flex-flow flex-direction属性とflex-wrap属性が同時に作成されます.
  • ex)flex-flow: column wrap:水平揃え、エンベロープ
    • justify-content中心軸に物を置く方法を指定します.flex-direction属性のcolumn、low標準に従って配置します.
  • justify-content: flex-start:column左側に貼り付け、row面に貼り付けます.
  • justify-content: flex-end:column右側に貼り付け、row面の下に貼り付けます.
  • justify-content: center:columnは水平中央を表し、rowは垂直中央を表す.
  • justify-content: space-around:画面の変化に伴い、アイテム間にスペースが発生します.(左、右端のスペースが小さく、中間のスペースがやや大きい)
  • justify-content: space-between:画面の変化に伴い、アイテム間にスペースが発生します.(左、右端にスペースがありません.)
  • justify-content: space-evenly:画面の変化に伴い、アイテム間にスペースが発生します.△左、右端の空間、物の間の空間の大きさは同じです.
    • align-items反対軸に物を置く方法を指定します.flex-direction属性のcolumn、low基準の反対軸とペアを組む.
  • align-items: center:column垂直中央、row垂直中央.
  • align-items: baseline:品物の大きさが異なる場合、テキストに基づいて並べ替えます.
  • align-items: space-around:画面の変化に伴い、アイテム間にスペースが発生します.(左、右端のスペースが小さく、中間のスペースがやや大きい)
  • align-items: space-between:画面の変化に伴い、アイテム間にスペースが発生します.(左、右端にスペースがありません.)
  • align-items: space-evenly:画面の変化に伴い、アイテム間にスペースが発生します.(左、右端スペース、購入品
    • プロジェクトに適用されるプロパティ
  • order: 2:アイテムの順番を指定できます.(居姫は使わない.)
  • flex-grow: 1:窓が大きくなると、窓の大きさによって物がいっぱいになります.品物ごとに数字で比例指定できます.
  • flex-shrink: 1:ウィンドウが小さくなると、ウィンドウの大きさに応じて物がいっぱいになります.品物ごとに数字で比例指定できます.
  • flex-basis: 10%:窓が大きくなったり小さくなったりすると、窓の大きさによって物がいっぱいになります.各項目はパーセントで指定できます.(flex-grow、flex-shill一度使用)
  • align-slef: cnter:各アイテムをソートできます.(相対軸に対して)

    • 実習コード

    <!DOCTYPE html>
<html lang="ko">
  <head>
    <link rel="stylesheet" href="./index.css" />
    <title>flex</title>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
      <div class="item item10">10</div>
    </div>
  </body>
</html>

    .container {
  background-color: beige;
  height: 100vh;
  display: flex;
  flex-direction: row; /*방향과 중심축 결정*/
  /* flex-wrap: wrap; 한줄에 가득차면 다음줄로 넘기기 */
  /* flex-flow: column wrap; */ /*flex-direction과 flex-wrap을 동시에 적용*/

  /*아이템을 어떻게 배치할 것인지*/
  /* justify-content: space-between; 중심축 기준 */
  /* align-items: center; 반대축 기준 */
  /* align-content: space-between; 반대축을 중심축처럼 생각하고 어떻게 배치할지*/
}

.item {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.item1 {
  background: #ef5350;
  flex-grow: 3;
}
.item2 {
  background: #ff7043;
  flex-grow: 1;
}
.item3 {
  background: #ffca28;
  flex-grow: 1;
}
.item4 {
  background: #66bb6a;
  flex-shrink: 1;
}
.item5 {
  background: #26c6da;
  flex-shrink: 2;
}
.item6 {
  background: #42a5f5;
}
.item7 {
  background: #3f51b5;
}
.item8 {
  background: #7e57c2;
  flex-basis: 60%;
}
.item9 {
  background: #ab47bc;
}
.item10 {
  background: #9e9e9e;
}

    flex練習サイト


    flexboxfroggy
    コメントサイト
    COJ 0036数happyは何個ありますか?
    「≪リカバリ｜Recovery｜emdw≫」ユーザー・ステータスとオブジェクト・データを使用したマッピング関数の作成