Catatan. contoh ini menggunakan ukuran font yang berbeda untuk menunjukkan bahwa item disejajarkan dengan garis dasar teks Show Properti align-contentProperti <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: row-reverse; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: row-reverse;" menumpuk item flex secara horizontal (tapi dari kanan ke kiri):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>0 digunakan untuk meratakan garis fleksibel Contoh <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: column; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: column;" menumpuk item flex secara vertikal (dari atas ke bawah):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>_9 Contoh <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: column-reverse; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: column-reverse;" menumpuk item flex secara vertikal (tapi dari bawah ke atas):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>0 Contoh <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: column-reverse; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: column-reverse;" menumpuk item flex secara vertikal (tapi dari bawah ke atas):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>1 Contoh <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: column-reverse; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: column-reverse;" menumpuk item flex secara vertikal (tapi dari bawah ke atas):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>2 Contoh <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: column-reverse; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: column-reverse;" menumpuk item flex secara vertikal (tapi dari bawah ke atas):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>_3 Contoh <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: column-reverse; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: column-reverse;" menumpuk item flex secara vertikal (tapi dari bawah ke atas):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>_4 Pemusatan SempurnaDalam contoh berikut, kita akan memecahkan masalah gaya yang sangat umum. pemusatan yang sempurna Contoh <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: column-reverse; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: column-reverse;" menumpuk item flex secara vertikal (tapi dari bawah ke atas):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>5 LARUTAN. Setel properti <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: row; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: row;" menumpuk item flex secara horizontal (dari kiri ke kanan):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>_8 dan <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: row; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: row;" menumpuk item flex secara horizontal (dari kiri ke kanan):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>9 ke tengah dan item fleksibel akan berada di tengah dengan sempurna Wadah HTML untuk apa?Container berfungsi untuk membungkus blok di dalamnya, sehingga terlihat rapi untuk ukuran layar . Kontainer juga memiliki breakpoint. Ukuran wadah akan menjadi 100% pada breakpoint tertentu. Misalnya, jika kita menggunakan kelas container-md, lebar container akan menjadi 100% di layar Ekstra Kecil dan Kecil.
Wadah Div untuk apa?Div adalah salah satu elemen dalam HTML yang berguna untuk membuat container atau wadah elemen dan memudahkan pengelompokan elemen dalam HTML .
Apa perbedaan antara. wadah dan wadah cairan?Jika container tidak penuh, dan diletakkan di tengah, maka container-fluid kebalikannya, container-fluid memiliki lebar penuh .
Apa itu Col MD?. col-md-* adalah prefiks kelas yang digunakan untuk membagi garis dengan ukuran lebih besar atau sama dengan 992px atau medium . |