Sifat flex-wrap CSS

王林

Lepaskan： 2023-09-02 08:05:02

ke hadapan

1520 orang telah melayarinya

CSS flex-wrap 属性

Gunakan atribut flex-wrap untuk menetapkan sama ada flex item wrap.

Anda boleh cuba menjalankan kod berikut untuk melaksanakan sifat flex-wrap. Item fleksibel di sini akan membalut

Contoh

Demonstrasi masa nyata

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
            flex-wrap: wrap;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
         <div>Q5</div>
         <div>Q6</div>
         <div>Q7</div>
         <div>Q8</div>
         <div>Q9</div>
      </div>
   </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Sifat flex-wrap CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya：Bagaimana untuk menetapkan jarak kabur dalam CSS? Artikel seterusnya：Gunakan CSS untuk menetapkan kesan topeng

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang