3 Tips Flexbox Saya untuk Meningkatkan CSS Anda

Ketika saya meninjau CSS, saya sering menemukan beberapa kesalahan terkait dengan Flexbox. Pada artikel ini, saya ingin membagikannya agar Anda tidak perlu melakukannya lagi.

justify-content vs kolom-celah

Ketika Flexbox pertama kali muncul, banyak yang didorong oleh properti justify-content, yang memungkinkan Anda untuk mengatur item grid secara merata menggunakan nilai space-between atau space-around. Dan tentu saja, banyak yang mulai menggunakannya. Tapi ada masalah.

Ketika Anda menggunakan nilai-nilai ini, Anda tidak berpikir kardinalitas akan berubah. Misalnya, jika saya menambahkan lebih banyak item ke kisi 4 kolom, mereka tidak akan diposisikan di awal baris seperti yang diharapkan.

Saya ingin menyarankan cara lain. Ada properti kolom-kisi yang dengannya Anda juga dapat mengatur jarak antar item dan kisi Anda akan berperilaku seperti yang diharapkan pengguna.

Jangan lakukan ini

<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%;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Anda dapat menggunakan ini

<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 dan align-items vs margin: auto

Saat kami memecahkan masalah pemosisian item, kami suka menggunakan properti justify-content dan align-items. Saya tidak membantah bahwa ini adalah cara penentuan posisi yang nyaman dan mudah. Tetapi sekali lagi, ada masalah yang sangat umum dengan pemosisian vertikal.

, 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, , , . .