CSS Flexbox 及其属性

在我们深入研究 CSS Flexbox 之前，让我们先了解一下Pre Flexbox

Pre Flexbox：回顾一些 CSS 中可能与学习 Flexbox 相关的属性。

• 我们有不同的位置属性，例如“绝对”和“相对”，这取决于我们希望如何在页面中放置元素。
• 浮动、网格、清晰的修复以帮助定位。
• 固定列的高度(创建 flexbox 的主要元素之一)。

弹性盒究竟是什么?

• Flexbox 是一种 CSS 显示类型设计，可以帮助我们非常轻松地制作 CSS 布局。
• 控制元素相对于其父元素以及彼此之间的位置、大小和间距。
• 它们非常适合响应式设计。
• 它有自己的一组属性。
• 它定义了控制布局的格式化上下文。
• 这是一种亲子关系。

注意：并非所有浏览器都支持 flexbox 属性，因此请确保您使用的浏览器支持此属性。

弹性盒基础：
将显示类型的 flexbox 应用到父容器，这将使其中的所有子元素调整为 flex 类型，这些将被称为“弹性项目”。这意味着它们变得更加灵活，即我们可以控制它们可以缩小多少和它们可以增长多少以及这些元素之间的间距。

显示： flex 属性：

• flex 容器可以改变子元素的宽度、高度和顺序。
• 项目可以增长或缩小以填充可用空间或防止溢出。
• 可用空间分布在其他项目中。

弹性盒的轴：

• 主轴：

A) 从左到右

flex-direction: row

B) 从右到左

flex-direction: row-reverse

C) 从上到下

flex-direction: column

D. 从下到上

flex-direction: column

• 横轴(垂直于主轴)

弹性盒的属性：

父属性：

• display定义了一个 flex 容器——flex 格式化上下文。
• flex-direction定义了容器内的主轴。
• flex-wrap允许 flex 项目包装到多于一行。
• flex-flow是flex-direction + flex-wrap 的简写。
• justify-content允许项目沿主轴对齐。
• align-content允许项目在单行中沿交叉轴对齐。
• align-items在横轴上对齐多行项目。

父属性：

• order允许在不改变源订单的情况下更改项目的顺序。
• flex-grow允许一个项目填满可用的空闲空间。
• 如果没有足够的可用空间， flex-shrink 允许项目缩小。
• flex-basis在分配空间之前定义项目的大小。
• flex是 flex-grow + flex-shrink + flex-basis的简写。
• flex-self能够在 flex 容器中对齐单个项目。

例子：

  

    
     
  
      

  

    
GeeksforGeeks

  

在应用 flex 属性之前：

应用 flex 属性后：

是的，只有这么多的 CSS 代码才能使用 flex-box 产生如此巨大的差异。

弹性盒的好处：

• 导航栏和菜单
• 网格布局
• 条形图
• 等高柱