📜  CSS Flexbox 简介

📅  最后修改于: 2021-08-30 12:44:09             🧑  作者: Mango

CSS 弹性盒模块是一维布局模型。

  1. 灵活高效的布局。
  2. 在项目之间分配空间。
  3. 控制它们的对齐。

在 flexbox 之前,我们有 4 种布局模式

  1. 块:用于在网页中制作部分。
  2. 内联:用于文本。
  3. 表:用于二维数据。
  4. 定位:它用于元素的显式位置。

弹性盒的特点:

  1. 提供了很大的灵活性。
  2. 排列好的物品。
  3. 适当的间距
  4. 物品的对齐。
  5. 物品的顺序。
  6. Bootstrap 4 构建在 flex 布局的顶部。

术语:有两个主要组成部分——

  1. 弹性容器
  2. 弹性项目

弹性容器:包含各种分区的父“div”称为弹性容器。

弹性项目:容器“div”内的项目是弹性项目。

            
Item1
                
Item2
    
Item3

Flexbox 轴:在使用 Flexbox 时,我们处理 2 轴 –

  1. 主轴
  2. 横轴

主轴:

  • 默认情况下,主轴从左到右运行。
  • Main Start:主轴的起点称为Main Start。
  • Main Size: Main Start 和 Main End 之间的长度称为 Main Size。
  • Main End:终点称为Main End。
  • 主轴和横轴


横轴:

  • 默认情况下,横轴与主轴垂直,即从上到下。
  • 交叉起点:交叉轴的起点称为交叉起点。
  • Cross Size: Cross Start 和 Cross End 之间的长度称为 Cross Size。
  • 交叉端点:端点称为交叉端点。