flexレイアウト

部分コード例

<style>
       .root{
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between
       }
       .item{
           width: 200px;
           height: 300px;
       }
style>

<div class="root">
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
div>

flexコンテナ
属性の概要
flex指定容器display:flexはflexレイアウトを設定した後、サブ元素のfloat、clear、vertical-alignの属性が失われます.容器上でflex-direction、flex-wrap、flex-flow、jusef-content、align-items、align-content

flex-direction:        (        )
                row:        ，     
                row-reverse：       ，      
                column：       ，      
                column-reverse：       ，     
                
flex-wrap:                  
                nowrap    ，         ，      ，                  。
                wrap：              ，      
                wrap-reverse：  ，      
                
flex-flow:      flex-direction   flex-wrap      ，     ，           
                  ： flex-flow:  || ;
         
justify-content：             。                   
                flex-start:    [   ]
                flex-end：   
                center：  
                space-between：    ，         ，          
                space-around：           ，                     。 
                
align-items:                   
                stretch                auto，          [   ]。
                flex-start：        
                flex-end：        
                center：        
                baseline:              
                
align-content:             ，          ，          
                  flex-wrap     nowrap    ，         ，        ，         。
                  flex-wrap     wrap    ，           ，                      。                
                            ，  flex-direction: row, flex-wrap: wrap 
                    stretch
               flex-start：              
               flex-end：              
               center：              
               space-between：      ，       ，          。
               space-around：           ，                                                                                                

モジュールのプロパティ
アイテムorder、flex-basis、flex-grow、flex-shrink、flex、align-selfの6つの属性があります.

order:                   ，    ，     ，     0
flex-basis:             ，         ，         ，           
flex-grow:                 0，         ，    
                     flex-basis        ，      ，      flex-grow        。            
                    flex-grow      1，          。(     )            
                    flex-grow     2，       1，                  。            
                       flex-basis              ，  flex-wrap：nowrap  ，   flex-grow       ，              。
flex-shrink:                 1，       ，      ，        
                     flex-shrink      1，      ，       。             
                     flex-shrink     0，       1，      ，     
flex:        flex-grow, flex-shrink   flex-basis         
align-self:                            
                 auto，         align-items   ，       ，     stretch