Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
flexbox align-content
gan saya mau tanya kan saya lagi belajar flexbox di css3 nih nah pada saat saya cobain align-content gk ada ngaruh apa" itu kenapa yah mohon penjelasannya
0
2 Jawaban:
Coba kasih contoh kode yang agan buat... Tampilin disini..
Atau periksa cache browser dan clear/hapus cache gan..
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
* {
margin: 0;
}
.container {
background: #F0B5B5;
display: flex;
flex-direction: row;
align-content: flex-start;
}
.box {
padding: 30px;
color: white;
font-family: poppins, "halvetica Neue", arial, sans-serif;
font-size: 1.5em;
text-shadow: 0 1px 1px rgb(0, 0, .2);
text-align: center;
width: 200px;
}
.box1 {
font-weight: bold;
background-color: #1dd0ad;
}
.box2 {
font-weight: bold;
background-color: #430FC6;
}
.box3 {
background-color: #FCE809;
color: black;
font-weight: bold;
}
.box4 {
font-weight: bold;
background-color: #950990;
}
.box5 {
font-weight: bold;
background-color: #0B0B0B;
}
.box6 {
font-weight: bold;
background-color: #1111F3;
}
.box7 {
font-weight: bold;
background-color: #7A0505;
}
.box8 {
font-weight: bold;
background-color: #F24712;
}
.box9 {
font-weight: bold;
background-color: #CF1805;
}
.box10 {
font-weight: bold;
background-color: #1dd0ad;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
</body>
</html>
0