语法

flex-wrap: value;

作用

当子元素的宽度/高度之和超过了父元素的宽度/高度,设置子元素是否换行显示

选项值

wrap:自动换行

wrap-reverse:自动换行,且侧轴会反向排列

示例

<html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>CSS - 伸缩布局 - 主轴子元素是否换行</title>    <style>      body {        padding: 0;        margin: 0;      }      .container {        font-size: 5em;        display: flex;        flex-wrap: wrap-reverse;      }      .top,      .bottom,      .left,      .right,      .front,      .back {        width: 150px;        height: 150px;        margin: 10px;      }      .top {        background-color: bisque;      }      .bottom {        background-color: rgb(77, 7, 243);      }      .left {        background-color: rgb(11, 240, 23);      }      .right {        background-color: rgb(7, 122, 189);      }      .front {        background-color: rgb(230, 18, 166);      }      .back {        background-color: rgb(243, 55, 9);      }    </style>  </head>  <body>    <div class="container">      <div class="top">1</div>      <div class="bottom">2</div>      <div class="left">3</div>      <div class="right">4</div>      <div class="front">5</div>      <div class="back">6</div>    </div>  </body></html>

换行html代码_换行html标签_html换行

限时特惠:本站每日持续更新海内外内部创业教程,一年会员只需88元,全站资源免费下载点击查看详情
站长微信:nnxmw123