Flexbox教程

Flexbox Flex-Wrap

通常情况下,如果容器空间不足,其余的弹性项目将被隐藏,如下所示。
Flex No Wrap Hide
flex-wrap 属性用于指定控制 flex-container 是单行还是多行。
使用-
flex-wrap: nowrap | wrap | wrap-reverse
flex-direction: column | column-reverse
wrap-如果空间不足,容器的元素(flexitems)将从上到下包装成额外的弹性线。 wrap-reverse-如果空间不足,容器的元素(flex-items)将从下到上包装成额外的弹性线。
现在,我们将通过示例了解如何使用 wrap 属性。

包装

将值 wrap 传递给属性 flex-wrap 后,容器的元素会从左到右水平排列,如下所示。
Wrap
以下示例演示了将值 wrap 传递给 flex-wrap 属性的结果。在这里,我们使用 flex-directionrow 创建了六个不同颜色的框。
<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

反向包装

将值 wrap-reverse 传递给属性 flex-wrap 后,容器的元素从左到右水平排列,如下所示。
Wrap Reverse
以下示例演示了将值 wrap-reverse 传递给 flex-wrap 属性的结果。在这里,我们使用 flex-directionrow 创建了六个不同颜色的框。
<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap-reverse;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

换行(列)

将值 wrap 传递给属性 flex-wrap 并将值 column 传递给属性 flex-direction,容器的元素从左到右水平排列,如下图。
Wrap Column
以下示例演示了将值 wrap 传递给 flex-wrap 属性的结果。在这里,我们使用 flex-directioncolumn 创建了六个不同颜色的框。
<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap;
         height:100vh;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

wrap-reverse(列)

将值 wrap-reverse 传递给属性 flex-wrap 并将值 column 传递给属性 flex-direction ,容器的元素从左到右水平排列,如下图。
Wrap Reverse Column
以下示例演示了将值 wrap-reverse 传递给 flex-wrap 属性的结果。在这里,我们创建了六个具有不同颜色和 flex-directioncolumn 的框。
<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap-reverse;
         height:100vh;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4