跳到主要内容

认识

2023年01月13日
柏拉文
越努力，越幸运

一、认识​

Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

二、特点​

2.1 覆盖性​

覆盖性是指设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

三、核心​

采用Flex布局的元素，称为 Flex 容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称项目。

Preview

四、问题​

4.1 Flex 有哪些属性呢？​

采用Flex布局的元素, 称为 Flex 容器（flex container）, 简称容器。它的所有子元素自动成为容器成员, 称为 Flex 项目（flex item）, 简称项目。

Flex 容器属性:

  • display: display: flex / inline-flex, 用于将一个元素声明为弹性容器，区分块级和行内弹性容器。

  • flex-direction: 定义主轴方向, 决定子项如何在主轴上排列。可选值: row、row-reverse、column、column-reverse

  • flex-wrap: 定义是否允许子项换行, 解决单行内空间不足的问题。可选值: nowrap（默认，不换行）、wrap（换行）、wrap-reverse（换行且顺序颠倒）

  • flex-flow: flex-direction 和 flex-wrap 的简写写法。例如: flex-flow: row wrap;

  • justify-content: 定义主轴（横向或纵向, 取决于 flex-direction）上子项的对齐方式。常用值包括: flex-start、flex-end、center、space-between、space-around、space-evenly

  • align-items: 定义交叉轴上子项的对齐方式（所有子项的默认值）。 选项有: flex-start、flex-end、center、baseline、stretch

  • align-content: 当有多行（或多列）时, 定义这些行（或列）在交叉轴上的对齐方式。 常用值与 align-items 类似: flex-start、flex-end、center、space-between、space-around、stretch

  • gap（及其子属性 row-gap, column-gap）: 用于设置 flex 子项之间的间距。虽然最初主要用于 Grid 布局, 但现代浏览器已支持在 Flex 布局中使用

Flex 项目属性:

  • order: 定义项目的排列顺序, 默认值为 0。数值越小的项目排在前面, 从而可以不改变 DOM 顺序调整展示顺序

  • flex-grow: 定义项目的放大比例。当容器有多余空间时, 根据各项目的 flex-grow 值分配额外空间

  • flex-shrink: 定义项目的缩小比例。当容器空间不足时， 项目会根据 flex-shrink 值相应收缩

  • flex-basis: 定义分配多余空间前，项目的初始大小。可以是具体长度值，也可以是 auto（根据内容或宽高属性决定）

  • flex: 是 flex-grow、flex-shrink 和 flex-basis 的简写。例如: flex: 1; 通常等同于 flex: 1 1 0%;，也可以使用 flex: none、flex: auto 等快捷方式

  • align-self: 允许单个项目覆盖容器上 align-items 的默认设置。同样的选项如：auto、flex-start、flex-end、center、baseline、stretch

4.2 Flex 与 Grid 有什么区别?​

Flexbox 是专注于一维布局、强调项目间自适应伸缩和对齐的解决方案，非常适合于组件内部的动态排列; 而 CSS Grid 则是一个二维布局系统，能够同时管理行和列，使得复杂页面的整体布局更为直观和灵活。