CSS flex-flow property

WBOY

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

forward

1367 people have browsed it

CSS flex-flow 属性

To set both the flex-direction and flex-wrap properties, use a single property flex-flow

Example

You can try running the following code to implement the flex-flow property to set the direction and wrap properties of flex-

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
            flex-flow: column 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-flow property. For more information, please follow other related articles on the PHP Chinese website!

source：tutorialspoint.com

Previous article：CSS center, horizontal and vertical alignment Next article：CSS Azimuth Property

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