×
  • 的CSS 柔性box–完整的初学者指南

  • 弹性流

    课程清单

    In this lesson, we will learn about 弹性流 property which is pretty straightforward it is a shorthand for flex-direction and flex-wrap.

    默认情况下,该属性设置为row和nowrap,这是单个属性的默认值。


    弹性流动特性

    style.css
    
    .flex-flow-reverse-wrap {
      /*   flex-direction: row-reverse; */
      /*   flex-wrap: wrap; */
      柔性流: row-reverse wrap;
    }
    

    如您在上面看到的,我们可以使用flex-direction和flex-wrap的任意组合,并在单个属性(即flex-flow)中使用,屏幕将根据该属性进行调整。
    而您的标记将是

    index.html
    
    <div class="container d-flex 柔性流-reverse-wrap">
     ...
    </div>
    

    您将看到:
    柔性流

    相似地

    我们还可以尝试将column-reverse和wrap-reverse用作flex-flow属性的值

    style.css
    
    .flex-flow-col-wrap-reverse {
      /*   flex-direction: column-reverse; */
      /*   flex-wrap: wrap-reverse; */
      柔性流: column-reverse wrap-reverse;
      height: 150px;
    }
    

    您将看到:
    柔性流反向

    注意:
    属性值必须是为了{ 柔性流: <flex-direction> <flex-wrap> }.
    两个属性的所有组合都可以正常工作。

    演示

    看笔
    柔性
    由rehmaanali(@geekstrick)
    密码笔.


  • 启用通知    不用了,谢谢