フロントエンド基本動作-応答レイアウト(flex)

本文は主にいくつかの自分が出会ったflexレイアウトのケースを記録します
flexの一般的なプロパティを簡単に振り返ります
6つの一般的なコンテナプロパティ

flex-flowプロパティはflex-directionプロパティとflex-wrapプロパティの略記形式で、デフォルト値はrow nowrapです.

flex-direction属性は、主軸の方向(すなわち、項目の配列方向)

を決定する.

flex-wrapのデフォルトでは、プロジェクトは1本の線(軸線とも呼ばれる)に並んでいます.flex-wrapプロパティは、1つの軸線が並べられない場合に、どのように改行するかを定義します.

justify-contentプロパティは、主軸上のアイテムの位置合わせを定義します.

align-itemsプロパティは、交差軸上でアイテムがどのように整列するかを定義します.

align-contentプロパティは、複数の軸の位置合わせを定義します.アイテムに軸が1本しかない場合は、このアトリビュートは機能しません.

6つの一般的な要素属性

flexプロパティはflex-grow、flex-shrink、flex-basisの略記で、デフォルトは0 1 autoです.次の2つのプロパティはオプションです.(すべてのプロジェクトのflex-growプロパティが1の場合、残りのスペースは等分されます(ある場合).1つのプロジェクトのflex-growプロパティが2で、他のプロジェクトが1である場合、前者が占める残りのスペースは他のアイテムの2倍になります.)flex：1はflex-grow: 1

に等価である.

flex-growプロパティは、プロジェクトの拡大率を定義します.デフォルトは0です.つまり、空き領域がある場合も拡大しません.

flex-shrinkプロパティは、プロジェクトの縮小率を定義します.デフォルトは1です.つまり、スペースが不足している場合、プロジェクトは縮小されます.(すべてのアイテムのflex-shrinkプロパティが1の場合、スペースが不足している場合は均等に縮小されます.1つのアイテムのflex-shrinkプロパティが0の場合、他のアイテムが1の場合、スペースが不足している場合は、前者は縮小されません.負の値はこのプロパティに対して無効です.)

flex-basisプロパティは、余分なスペースを割り当てる前にプロジェクトが占有する主軸スペース(main size)を定義します.ブラウザはこのプロパティに基づいて、主軸に余分なスペースがあるかどうかを計算します.デフォルト値はauto、すなわちプロジェクトの本来のサイズです.(widthプロパティやheightプロパティと同じ値(350 pxなど)に設定すると、プロジェクトが固定スペースを占めます.)

orderプロパティは、アイテムの並べ替え順序を定義します.数値が小さいほど、配置が前になり、デフォルトは0です.

align-selfプロパティを使用すると、align-itemsプロパティを上書きできる単一のアイテムとは異なる位置合わせが可能になります.デフォルト値はautoで、親要素のalign-items属性を継承し、親要素がない場合stretchと同等です.

もっと詳しい基礎知識については、私のコレクションのリンクをいくつか入れましょう.

Flex-フレックスレイアウトはなるほど簡単!

30分学会Flexレイアウト

デモ:Flexboxデモステーション
1.上下レイアウト、中間適応

  

      
header：height = 100px
      
conent：height = auto
      
  

.flexContainer{
    display: flex;
    height: 100%; //     
    flex-direction: column; //        
}    
.header,.footer{
    font-size: 18px;
    display: flex; //            
    justify-content: center; //        
    align-items: center;  //       
}    
.header{
    height: 100px;
    background: #665aa4;
}    
.main{
    flex-grow: 1; //      flex: 1     
    text-align: center;
    background: #3dc95d;
}    
.footer{
    height: 100px;
    background: #fc430b;
}    

2.複数のエレメントの幅を親に分割し、1行で最大何個のエレメントを表示するかを設定できます.

    conent：height = auto
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
    

//styl,          css 
.main
  flex 1
  text-align: center
  background: #3dc95d
  .main-body
    display: flex  //  
    flex-wrap: wrap //  
    .main-item
      flex-grow:1 //                           ，   0，         ，    。
      min-width: 30% //    width: 30% flex-basis:30%;（flex: 0 0 30%）      ，      
      max-width: 100% //    min-width    max-width             
      margin: 15px
      height: 30px
      border: 1px red solid
      background: #ccc
      text-align: center

完全応答式で、遊覧機の窓の幅を変えることもできますし、.main-itemの数を変えることもできます.
考え方の出所:仕事の中で1件出会ったことを覚えます...
3.聖杯レイアウト

  
conent：height = auto
  
header：height = 100px
  

.flexContainer{
  display:flex;
  height:100vh;
}
.footer{
  width:50px;
  background #CCC
}
.main{
  flex-grow:1;
  background #3dc95d
}
.header{
  width 150px;
  background #665aa4
  order:-1;//  order     (html main     ，           )
}

4.各行の間隔を均等に割り当て、改行するリスト項目

    
1
    
2
    
3
    
4
    
5
    
6

.container{
    display: flex;
    justify-content: space-around; //                 item  
    flex-wrap: wrap; //              
}
.item{
    width: 30%;  //（      ）  flex: 0 0 30%;
    min-width: 400px; //           
    max-width: 420px; //           
    min-height: 360px;
}    

justify-content:space-around、justify-content: centerまたはjustify-content: space-betweenを使用した後に質問があります.最後の図の最後の列を見て、順番に並べてもらいたいのですが、どうすればいいですか.
解決方法1

//              ，
//                 - 1
//                




// css      ：
//        ，                 
.item:empty {
    height: 0;
    min-height: 0px; //             
    border: none; //   
    padding: 0.......
}
//          .item    ，     
//.fix {
//  width: 30.333333%;
//  height:0;
//  margin: 0;
//}

缺点就是加了额外空标签

效果还算满足要求

解决方法二：

.container{
  display: flex;
  flex-wrap: wrap;
  background: red;
}
.item{
  box-sizing: border-box; 
  width: 30.333333%;
  margin: 10px 1.5%;
  background:#eee;
  height: 120px;
}

この方法は応答式も実現できるが、.itemのサブ要素の幅が一定の幅より小さくまたは大きくなければ、言い換えればmin-widthまたはmax-widthを設定すると、1行を均一に満たすことができない場合がある.
これは今私が知っている2つの使いやすい方法で、自分の実際の状況によって選択しましょう.もしideaがあれば、伝言を歓迎して討論します.
5.図のように各ブロック間を縦線で分割する

// stylus
.pieItem
  width: 33.333%
  min-width: 400px
  max-width: 50%
  box-sizing: border-box
  .pieDiv
    height: 360px
  &:not(:nth-child(3n))
    .pieDiv::after
      content: ''
      width: 1px
      position: absolute
      height: 360px
      top 50%
      right 0
      transform: translate(0, -50%)
      background: #ccc
      background: -webkit-gradient(radial, 0 180, 0, 0 180, 180, from(#ddd), to(rgba(0,0,0,0)))