Skip to content
电脑工程师入门

电脑工程师入门

create tomorrow, create happiness

  • 实用软件教程
    • Excel
    • WordPress
    • Powerpoint
    • PowerApps
    • PowerAutomateDesk
  • 计算机语言入门
    • PHP
    • Bootstrap
    • JavaScript
    • Python
    • HTML
    • WordPress
  • 咨询
  • Home
  • Bootstrap
  • 第十一章 【超入门】Bootstrap的Flex
  • HOME
  • Bootstrap
  • 第十一章 【超入门】Bootstrap的Flex

第十一章 【超入门】Bootstrap的Flex

Bootstrap

flex是Bootrasp的一个最重要的概念,当您想要指定元素的排列方式时,请使用 flex。“flex”是“显示”值之一。使用“flex”,您可以轻松指定元素的显示方式(例如它们的排列方式)。现在,让我们看看如何使用“flex”水平对齐。

这样,文本将向左对齐,没有任何边距。在右对齐的情况下,“flex-row”部分应该是“flex-row-reverse”。

接下来我们来看一下垂直对齐的情况。直到“d-flex”和以前一样。

如您所见,当仅使用网格系统无法很好地安排事物时,“flex”是一个有用的class。

对齐排列(x/y 轴)

现在让我们仔细看看对齐元素。“Flex”不仅可以用于排列,还可以轻松对齐。多个元素可以整齐地对齐。让我们看一个例子。

这是水平对齐的示例。您可以将它们居中对齐,也可以将它们均匀隔开。图片、图标等元素可以整齐排列,是创建各种站点时非常重要的一个Class。

接下来是垂直排列的情况。同样,使用的Class是相同的。意思是一样的。

标签:Bootstrap

文章导航

❮ Previous Post: 第十章 【超入门】Bootstrap的文本
Next Post: 第十二章 【超入门】Bootstrap的弹窗 ❯

关联内容

Bootstrap
第一章【超入门】Bootstrap基本用法
Bootstrap
第二章【超入门】Bootstrap的基础
Bootstrap
第三章【超入门】理解Bootstrap 断点
Bootstrap
第四章【超入门】Bootstrap的布局
Bootstrap
第五章【超入门】Bootstrap导航
Bootstrap
第六章【超入门】Bootstrap表格

实用软件教程

  • Powerpoint
  • Excel
  • PowerAutomateDesk
  • Wordpress
  • Powerapps

编程语言入门

  • JavaScript
  • HTML
  • PHP
  • Python
  • Bootstrap

Copy right by flashyonder.com