css3-flex

1
2
3
4
555555555555555
6
1
2
3
4
555555555555555
6
1
2
3
4
555555555555555
6
1
2
3
4
555555555555555
6
1
2
3
4
555555555555555
6
1
2
3
4
555555555555555
6
1
2
3
4
555555555555555
6

  view source
  JavaScript
  
  CSS
  /*
https://developer.mozilla.org/ja/docs/Web/CSS/align-items
https://liginc.co.jp/web/html-css/css/21024
*/

ul{
  display: flex;
  min-height:120px;
  border:2px solid #ccc;
}

li{
  min-width:80px;
  min-height:80px;
  border:1px solid #999999;
}

li:nth-child(2n){
  background-color: #ffcccc;
}
li:nth-child(2n+1){
  background-color: #ccffcc;
}

/*文字を縦中央に*/

li a{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


.flex1{
  flex-wrap:nowrap;

}

.flex2{
  justify-content: center;
}

.flex3{
  flex-wrap:wrap;
}
.flex3 li{
  width:30%;
}
.flex4{
  align-items: center;
}

.flex5{
  align-items: end;
}

.flex6{
  align-items: stretch;
}
.flex7{
  flex-direction: row-reverse;
}


  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-css/css3-flex/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。