Flex布局（弹性布局）

时间：2025-03-18 10:02:11

概念：

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

  • 当我们为父盒子设为flex布局以后，子元素的 float 、clear和vertical-align属性将失效
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

  • 默认主轴方向就是x轴方向，水平向右
  • 默认侧轴方向就是y轴方向，水平向下

注意：主轴和侧轴是会变化的，flex-direction属性决定主轴的方向(即项目的排列方向)，就看flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

布局原理

采用Flex布局的元素，称为Flex容器(flexcontainer)，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目(flexitem)，简称”项目”。

div {
    display: flex;
    width: 80%;
    height: 300px;
    background-color:Dpink;
    justify-content:space-around;
}
div span {
    /*width:150px;*/
    height: 100px;
    background-color:purple;
    margin-right: 5px;
    flex: 1;
}

这里div就是flex父容器 体验中span就是子容器flex项目

子容器可以横向排列也可以纵向排列

总结flex布局原理:

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见属性

对父容器设置：

  1. flex-direction 设置主轴的方向

  • row 默认值从左到右

  • row-reverse 从右到左

  • column 从上到下

  • column-reverse 从下到上

  1. justify-content 设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式

注意:使用这个属性之前一定要确定好主轴是哪个

  • flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右

  • flex-end：从尾部开始排列

  • center：在主轴居中对齐(如果主轴是x轴则水平居中)

  • space-around：平分剩余空间

  • space-between：先两边贴边，再平分剩余空间(重要)

  1. flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线(又称“轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的

  • nowrap：默认值，不换行

  • wrap：换行

  • wrap-reverse：换行，第一行在下方

  1. align-items 设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是y轴)上的排列方式在子项为单项的时候使用

  • flex-start：默认值 从上到下

  • flex-end：从下到上

  • center：挤在一起居中( 垂直居中 )

  • baseline: 项目的第一行文字的基线对齐。

  • stretch：拉伸

  1. align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。

  • flex-start：默认值在侧轴的头部开始排列

  • flex-end：在侧轴的尾部开始排列

  • center：在侧轴中间显示

  • stretch：设置子项元素高度平分父元素高度

  • space-around：子项在侧轴平分剩余空间

  • space-between：子项在侧轴先分布在两头，再平分剩余空间

align-content 和 align-items 区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸

align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空等属性值。

总结就是 单行找align-items ，多行 （换行） 找align-content

  1. flex-flow flex-direction和flex-wrap 属性的复合属性
  • flex-flow:row wrap;

对子容器设置：

  1. flex属性定义子项目分配剩余空间，用flex来表示占多少份数 
.item {
    flex:<number>; /* default 0 */
}
  1. align-self 控制子项自己在侧轴上的排列方式
  • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
  • 默认值为auto，表示继承父素的align-items属性
  • 如果没有父元素，则等同于stretch
span:nth-child(2) {
    /*设置自己在侧轴上的排列方式*/
    align-self: flex-end;
}
  1. order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

注意：和z-index不一样。

  div span:nth-child(2){
    /*默认是0    -1比0小所以在前面*/
    order: -1;
  }

总结：

对父容器设置的属性 作用 属性值
flex-direction 设置主轴的方向 row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
justify-content 设置主轴上的子元素排列方式> 注意:使用这个属性之前一定要确定好主轴是哪个 flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：在主轴居中对齐(如果主轴是x轴则水平居中)
space-around：平分剩余空间
space-between：先两边贴边，再平分剩余空间(重要)
flex-wrap 设置子元素是否换行 nowrap：默认值，不换行
wrap：换行
wrap-reverse：换行，第一行在下方
align-content 设置侧轴上的子素的排列方式(多行) flex-start：默认值在侧轴的头部开始排列
flex-end：在侧轴的尾部开始排列
center：在侧轴中间显示
stretch：设置子项元素高度平分父元素高度
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，再平分剩余空间
align-items 设置侧轴上的子元素排列方式(单行) flex-start：默认值 从上到下
flex-end：从下到上
center：挤在一起居中( 垂直居中 )
baseline: 项目的第一行文字的基线对齐。
stretch：拉伸
flex-flow 复合属性，相当于同时设置了flex-direction和flex-wrap flex-flow:row wrap;
对子容器设置的属性 作用 属性值
flex-grow flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 flex-grow: ; / default 0 /
flex-shrink flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-shrink: ; / default 1 /
flex-basis 设置Flex项在主轴上的初始大小，可以是具体的长度值或百分比 flex-basis: auto; / default auto /
flex 定义子项目分配剩余空间，用flex来表示占多少份数> flex属性是flex-grow、flex-shrink 和 flex-basis的简写，默认值为0 1 auto flex:
align-self 控制子项自己在侧轴上的排列方式 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto，表示继承父素的align-items属性
如果没有父元素，则等同于stretch
order 定义项目的排列顺序 order: -1;
数值越小，排列越靠前，默认为0

应用场景

为什么用flex布局？

它为开发者提供了一种更高效、更灵活、响应式地来处理网页布局

  1. 灵活性：Flex布局提供了高度的灵活性，可以轻松适应不同的屏幕尺寸和方向，是响应式设计的理想选择。
  2. 简化的布局语法：Flex布局使用简单的CSS属性来定义复杂的布局结构，减少了以往需要的复杂和冗长的CSS代码。
  3. 自动尺寸调整：Flex项可以自动调整大小以适应其内容或分配给它们的空间，简化了布局的维护。
  4. 高效的对齐控制：Flex布局允许开发者轻松地在主轴和交叉轴上对齐项目，包括垂直和水平居中。
  5. 空间分配：Flex布局可以智能地在项目之间分配额外的空间，提供了justify-content和align-items等属性来控制布局的对齐和分布。
  6. 无需浮动：Flex布局提供了一种不依赖于float的布局方式，避免了与浮动相关的常见问题。
  7. 支持多行和换行：Flex容器中的项目可以自动换行，且可以控制行的对齐方式，这为多行布局提供了便利。

什么情况下会使用flex布局？

  1. 响应式网页设计：

    • Flex布局可以轻松创建响应式布局，使网页能够适应不同的屏幕尺寸和设备。。

  2. 居中对齐：

    • Flex布局提供了简便的方法来居中对齐元素，无论是在主轴上还是交叉轴上。

  3. 导航菜单：

    • Flex布局可以用来创建水平或垂直的导航菜单，易于实现导航项的对齐和分布。

  4. 多行布局：

    • 当Flex容器设置为flex-wrap: wrap;时，可以实现多行布局，适用于创建网格或列表视图。

  5. 一维布局：

    • 当需要在水平或垂直方向上排列元素时，Flex布局可以快速实现线性布局

  6. 等高列：

    • 使用align-items: stretch;可以使Flex项等高，适用于创建等高列的布局。

  7. 卡片布局：

    • 利用Flex布局可以轻松排列一组卡片，实现整齐且响应式的卡片视图。

  8. 空间分配：

    • Flex布局可以轻松地在元素之间分配空间，使用justify-content和align-items属性。

  9. 自适应布局：

    • Flex布局中的flex-grow属性允许元素根据可用空间自动调整大小。

  10. 内容环绕广告或浮动按钮：

    • 使用Flex布局可以创建内容区域，其中广告或浮动按钮围绕内容布局。

  11. 分栏布局

代码示例：
两栏、三栏自适应布局
.wrap { display: flex; }
.left { width: 200px; }
.right { flex: 1; }
实现子盒子垂直居中
    /*在父盒子设置*/
    .wrap{
        display: flex;
        justify-content:center;
        align-item:center;
    }

相关文章