CSS flex-wrap property

王林

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

forward

1447 people have browsed it

CSS flex-wrap 属性

Use the flex-wrap property to set whether the flex item wraps.

You can try running the following code to implement the flex-wrap property. The flex items here will wrap

Example

Real-time demonstration

<!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>

Copy after login

The above is the detailed content of CSS flex-wrap property. For more information, please follow other related articles on the PHP Chinese website!

source：tutorialspoint.com

Previous article：How to set blur distance in CSS? Next article：Use CSS to set mask effects

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn