×
  • 的CSS Flexbox–完整的初学者指南

  • 弹性包装

    课程清单

    在本课程中,我们将研究另一个出色的属性,即Flex 包属性。

    默认情况下,如果没有足够的空间简单地溢出湖北福彩,则容器中的所有flex湖北福彩都将尝试放入一行。
    从我们当前的情况来看,如果您减小浏览器的宽度,则湖北福彩开始缩小,然后将不再可见。
    我们可以使用属性更改此行为。


    弹性包装属性

    让我们回到CSS文件,在其中我们将为属性创建另一个通用类。
    由于该属性接受3个可能的值。即

    描述
    Nowrap 默认值。 指定不包装柔性物品
    指定必要时将包装柔性物品
    绕回 指定如果需要,弹性湖北福彩将以相反顺序包装

    水平包装

    style.css
    
    .flex-wrap{
      flex-wrap: 包;
    }
    

    标记将是

    index.html
    
    <div class="container d-flex flex-wrap">
      ...
    </div>
    

    当我们设置要包装的值时,这些湖北福彩不会溢出,并且会进入下一行,即包装所有湖北福彩。
    之后,我们将显示的是:
    包装物品
    包装仅在需要时才发生,并且如果没有足够的空间仅容纳一项,则第5项示例仅会看到第5项移动到下一行。
    如果您减小尺寸,则湖北福彩4也将移至下一行asn,依此类推。

    换行

    反向包装的作用是代替落入其下一行的湖北福彩爬入上一行。
    让我们创建一个示例。

    style.css
    
    .flex-wrap-reverse {
      flex-wrap: 绕回;
    }
    

    标记将是

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

    之后,我们将显示的是:
    换行湖北福彩

    演示–水平包装

    看笔
    柔性包装纸–水平包装
    由rehmaanali(@geekstrick)
    密码笔.


    垂直包装

    带方向柱包装

    考虑一个高度有限的容器,我们想将物品包装在该容器内。
    如果没有包装,则物品将溢出并占据更高的高度,因此我们可以研究此示例。

    style.css
    
    .container {
        border: 6px solid black;
        height: 112px; /* fix height for container*/
    }
    /* Our common classes which we have made through out the lessons */
    .d-flex { ... }
    .flex-wrap { ... }
    .flex-column { ... }
    
    index.html
    
    <div class="container d-flex flex-wrap flex-column">
      ...
    </div>
    

    之后,我们将显示的是:
    柱包装湖北福彩
    同样,我们可以通过只更改类来进行反向包装,这将使湖北福彩从右到左排列

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

    之后,我们将显示的是:
    列换行湖北福彩

    演示–垂直包装

    看笔
    软包装–垂直包装
    由rehmaanali(@geekstrick)
    密码笔.


  • 启用通知    不用了,谢谢