Clever Geek Handbook

CSS を改善するための 3 つのフレックスボックスのヒント

CSS を確認すると、Flexbox に関連するエラーに遭遇することがよくあります。この記事では、それらを共有して、もう一度行う必要がないようにします。





justify-content と column-gap

Flexbox が最初に登場したとき、多くの人は justify-content プロパティによって推奨されました。このプロパティを使用すると、スペース間のスペースまたはスペース アラウンドの値を使用してグリッド アイテムを単純に均等に配置できます。そしてもちろん、多くの人がそれを使い始めました。しかし、問題があります。





これらの値を使用すると、カーディナリティが変更されるとは考えられません。たとえば、4 列のグリッドにさらに項目を追加すると、期待どおりに行の先頭に配置されません。





別の方法を提案したい。項目間の間隔を設定することもできる column-grid プロパティがあり、グリッドはユーザーの期待どおりに動作します。





こんなことしないで





<div class="grid">
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
  <div class="item"><span>item 3</span></div>
  <div class="item"><span>item 4</span></div>
  <div class="item"><span>item 5</span></div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
.grid {
  display: flex;
  justify-content: space-between; /* or space-around */
}

.item {
  width: 30%;
}

これを使用できます





<div class="grid">
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
  <div class="item"><span>item 3</span></div>
  <div class="item"><span>item 4</span></div>
  <div class="item"><span>item 5</span></div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
.grid {
  display: flex;
  column-gap: 5%;
}

.item {
  width: 30%;
}

justify-content と align-items とマージン: auto

アイテムの配置の問題を解決するときは、justify-content および align-items プロパティを使用するのが好きです。これが便利で簡単なポジショニング方法であることに異論はありません。繰り返しになりますが、垂直方向の配置には特によ​​くある問題があります。





, justify-content align-items flex-. flex- flex-, flex- , .





, , - . .





margin auto. flex- auto flex-. flex- , flex-, . , flex-. 









<div class="modal">
  <div class="modal__main"></div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    





<div class="modal">
  <div class="modal__main"></div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
.modal {
  display: flex;
}

.modal__main {
  margin: auto;
}

flex-

Flexbox , flex- ( display: flex), (flex-) blockified.





, display, . , inline inline-block, block, inline-flex -> flex, inline-grid -> grid inline-table -> table.





display: block, inline, inline-block flex-. , .









.grid {
  display: flex;
}

.item {
  display: block; /* inline or inline-block */
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    





.grid {
  display: flex;
}

P.S. CSS/HTML, , , . .







More articles:


All Articles