Diskusi Sebastian Halim

Sebastian Halim
Ditanyakan pada: Mengatur Urutan Element Dengan Flex Direction

Mengatur Urutan Element Dengan Flex Direction

Pada Materi Flex Direction, jika saya menambahkan Style Font-size pada container div seperti : #container div { width: 200px; height: 200px; font-size: 100px; text-align: center; } kenapa pada saat saya jalankan, backgroundnya melebihi dari background belakangnya? apakah pada saat dibuat style Font-Size, FlexBox ini menjadi tidak aktif?

1 Jawaban

Bantu Jawab
Avatar
BroKoding

8 hari yang lalu

Halo kak, untuk bagian ini boleh lampirkan keseluruhan code serta screenshot tampilan yang didapat ya. Apabila ukuran content dipaksakan melebihi batas cakupan flex container, maka hasilnya akan "meluber".

Sebastian Halim

ini untuk HTMLnya &lt;!DOCTYPE html> &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;title&gt;Flex Box&lt;/title&gt; &lt;link rel="stylesheet" href="app.css"&gt; &lt;/head&gt; &lt;body&gt; <h1>FlexBox</h1> <section id="container"> <div xss=removed>1</div> <div xss=removed>2</div> <div xss=removed>3</div> <div xss=removed>4</div> <div xss=removed>5</div> </section> &lt;/body&gt; &lt;/html&gt; ini untuk CSSnya h1 { text-align: center; } #container { background-color: blanchedalmond; width: 90%; height: 500px; margin: 0 auto; border: 5px solid blanchedalmond; display: flex; flex-direction: column; } #container div { width: 200px; height: 200px; font-size: 100px; text-align: center; }

BroKoding

Untuk code nya lampirkan pada pastebin ya kak, karena apabila dilampirkan pada reply diskusi akan rusak code nya