• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • flex-wrap

    版本:CSS3

    CSS flex-wrap指定 flex 元素单行显示还是多行显示。如果允许换行,这个属性允许你控制行的堆叠方向。

    示例

    flex-wrap: nowrap;  /* default value */
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
    
    /* global values */
    flex-wrap: inherit;
    flex-wrap: initial;
    flex-wrap: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE11以上版本的浏览器都支持flex-wrap

    语法

    flex-wrap:nowrap | wrap | wrap-reverse

    取值

    • nowrap:flex 的元素被摆放到到一行,这可能导致溢出 flex 容器。cross-start会根据flex-direction的值相当于startbefore
    • wrap:flex 元素被打断到多个行中。cross-start会根据flex-direction的值选择等于startbeforecross-end为确定的cross-start的另一端。
    • wrap-reverse:和 wrap 的行为一样,但是cross-startcross-end互换。

    说明:

    该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

    • 对应的脚本特性为flexWrap
    默认值nowrap
    适用于flex容器
    继承性
    动画性visual
    计算值指定值

    例子

    //HTML
    
    <h4>this is an example for flex-wrap:wrap </h4>
    <div class="content">
      <div class="red">1</div>
      <div class="green">2</div>
      <div class="blue">3</div>
    </div>
    <h4>this is an example for flex-wrap:nowrap </h4>
    <div class="content1">
      <div class="red">1</div>
      <div class="green">2</div>
      <div class="blue">3</div>
    </div>
    <h4>this is an example for flex-wrap:wrap-reverse </h4>
    <div class="content2">
      <div class="red">1</div>
      <div class="green">2</div>
      <div class="blue">3</div>
    </div>
    
    //CSS
    
    /* common styles */
    .content,
    .content1,
    .content2 {
        color: #fff;
        font: 100 24px/100px sans-serif;
        height: 150px;
        text-align: center;
    }
    
    .content div,
    .content1 div,
    .content2 div {
        height: 50%;
        width: 50%;
    }
    .red {
        background: orangered;
    }
    .green {
        background: yellowgreen;
    }
    .blue {
        background: steelblue;
    }
    
    /* flexbox styles */
    .content {
        display: flex;
        flex-wrap: wrap;
    }
    .content1 {
        display: flex;
        flex-wrap: nowrap;
    }
    .content2 {
        display: flex;
        flex-wrap: wrap-reverse;
    }
    

    上篇:flex-direction

    下篇:place-items