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

  • 弯曲方向

    课程清单

    在本课程中,我们将学习弯曲方向。

    它建立了主轴,该主轴除了默认情况下如何将flex项放置在flex容器内外,主轴从左向右流动,这就是我们在上一课中从左向右放置项的原因。

    通过更改属性,我们可以更改项目的放置方式,让我们来看一个示例。


    弯曲方向属性

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

    描述
    默认值。柔性项目水平显示,连续
    行反向 与行相同,但顺序相反
    柔性项目垂直显示为一列
    列反转 与列相同,但顺序相反

    行反转

    style.css
    
    .flex-row-reverse {
      flex-direction: 行反向;
    }
    

    标记将是

    index.html
    
      <div class="container d-flex flex-row-reverse">
        <div class="flex-item item-1">Item 1</div>
        ...
      </div>
    

    之后,我们将显示的是:
    行反向
    如您所见,这些项目以相反的顺序放置。

    style.css
    
    .flex-column {
       flex-direction: 柱;
    }
    

    标记将是

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

    之后,我们将显示的是:
    柱
    因此这些物品会相互堆叠。

    列反转

    最后,我们还有一个column-reverse,它以相反的顺序堆叠项目。

    style.css
    
    .flex-column-reverse {
       flex-direction: 列反转;
    }
    

    标记将是

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

    之后,我们将显示的是:
    列反转
    如您所见,item5在顶部,item1在底部,项目从底部到顶部流动。

    在Flex方向上进行演示

    看笔
    Flexbox 的CSS
    由rehmaanali(@geekstrick)
    密码笔.

    弯曲方向属性

  • 启用通知    不用了,谢谢