Design Note

flexboxの使い方一覧

  • ツール
  • 親要素
    • display: flex;
    • flex-direction：子要素の配置方向
      • row：左から順に。デフォルト。
      • row-reverse：右から順に
      • column：上から順に
      • column-reverse：下から上に
    • flex-wrap：子要素の折り返し設定
      • nowrap：折り返しなし
      • wrap：折り返しして複数行になることあり
      • wrap-reverse：折り返しするときは、後半のが上にいく
    • justify-content：水平方向の揃え方 
      • flex-start：横方向は左揃え、縦方向は上揃え
      • flex-end：横方向は右揃え、縦方向は下揃え
      • center：中央揃え
      • space-between：余分な空きは均等にスペース開ける
      • space-around：space-betweenと同じだが、両端にもスペースをあける
    • align-items：垂直方向の揃え方
      • flex-start：横方向は左揃え、縦方向は上揃え
      • flex-end：横方向は右揃え、縦方向は下揃え
      • center：中央揃え
      • baseline：テキストのベースラインを揃える
      • stretch：説明むずい。縦いっぱい使う。
    • align-content：行の揃え方（複数行になった時）
      • flex-start：横方向は左揃え、縦方向は上揃え
      • flex-end：横方向は右揃え、縦方向は下揃え
      • center：中央揃え
      • space-between：余分な空きは均等にスペース開ける
      • space-around：space-betweenと同じだが、両端にもスペースをあける
  • 子要素
    • flex：短縮系
      • 0 1 auto：デフォルト
      • flex-grow：伸びる倍率。このプロパティに従い、自動的に利用可能な領域いっぱいまで伸びる。
        • 0：デフォルト
        • 1：全部等分で伸びる
        • 1、2：2は1のアイテムの2倍になる
        • none： ‘0 0 auto’と見なされる。
        • マイナス：無効
      • flex-shrink：縮む倍率。
        • 1：デフォルト
      • flex-basis：widthみたいなもの。ベースとなる横幅。最小の長さ。
        • auto：デフォルト
    • align-self：個別のFlexアイテムの垂直方向の揃え方
      • align-itemsと同じ。個別に指定できる。
    • order：順番指定
      • 順番を変えれる

Fatal error: Uncaught Error: Call to undefined function set_post_views() in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php:658 Stack trace: #0 /home/jszk/desnote.com/public_html/wpjs/wp-includes/template-loader.php(78): include() #1 /home/jszk/desnote.com/public_html/wpjs/wp-blog-header.php(19): require_once('/home/jszk/desn...') #2 /home/jszk/desnote.com/public_html/index.php(17): require('/home/jszk/desn...') #3 {main} thrown in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php on line 658