FLEXグリッドレイアウトおよびレスポンス処理

前の文章はFlexでBorderLayoutを実現し、この章ではよく使われるグリッドレイアウトと応答式処理を実現した.
まずHTML構造を定義し、主Boxはgridであり、各項目はgrid-cellであり、以下は私たちのHTMLコード構造である.

    

        1    
    

        2    

gridはflexコンテナ、grid-cellはflexアイテム、CSSコードを追加

.grid{
    display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}.grid-cell{
    flex-grow: 1;
   flex-shrink: 1;
   padding: 10px;
}

前の2編のflexレイアウトの文章を知ったことがあって、コードは何も説明することができなくて、space-aroundはflex項の間の距離が等しいことを保証するためです.grid-cellには等比例の拡大または縮小が設定.
ここにいるよgrid-cellにはdemoボックスが入っています.これはgrid-cell要素をよりよく制御し、flexレイアウトの機能性を破壊しないためです.つまり、それぞれがそれぞれのことを担当しています.効果を見るために、私はもっと多くのグリッドモードを追加しました.HTML構造は、次のようになっています.

    

        
1
    
    

        
2
    




    

        
1
    
    

        
2
    

    

        
3
    




    

        
1
    
    

        
2
    

    

        
3
    

    

        
4
    

CSSコード:

.grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}.grid-cell{
    flex-grow: 1;
    flex-shrink: 1;
    padding: 10px;
}.demo{
    background-color: #eeeeee;
    min-height: 50px;
    text-align: center;
     width: 100%;;
}

demoには高さと背景色を設定、レイアウトのために正しく表示する.
最終的な効果は次の図のとおりです.
グリッドレイアウトを実現しました今までと违って、コンピューターに表示するだけでいいのですが、今の社会では、スマートデバイスがあちこちにあります.人々がスマートデバイスを使用する時間もPCよりはるかに大きく、スマートデバイスの表示も重要であり、応答式のレイアウトも出てきた.
レスポンスレイアウトはmediaという属性を用いるため、処理も簡単である.次のコードを追加するだけです.

@media (max-width:768px){
     .grid-cell{
         flex-basis: 100%;
     }
}

上のグリッドレイアウトの異なるデバイスの表示効果が完了する.ここでは768画素を超えるデバイスが正常に表示され、この値未満であればflex項目ごとに行全体が表示されます.効果を確認:
本文は呉統威のブログに属して、微信の公衆番号:bianchengderenのオリジナルの文章、転載する時出典と相応のリンクを明記してください:http://www.wutongwei.com/front/infor_showone.tweb?id=150皆さんの伝播と分かち合いを歓迎します.