flex 弹性布局还不懂?一篇文章带你了解一下

冥想.jpg
在这里插入图片描述

flex 是什么

Flex布局,全称为Flexible Box布局,或简称Flexbox,是一种由W3C提出用于网页设计的新型布局模式。它旨在提供一个更加有效且灵活的方式来布局、对齐和分配容器内项目的空间,无论是行还是列方向。Flex布局特别适用于响应式和动态调整的用户界面设计,特别是在不同屏幕尺寸和设备上实现一致的布局效果。

在Flex布局中,父容器被设置为display: flex;或display: inline-flex;后,就变成了一个Flex容器。这个容器内的所有直接子元素自动成为Flex项目。这种布局的核心优势在于能够简便地处理元素的对齐(包括水平和垂直方向)、分配剩余空间、调整元素顺序以及控制元素尺寸,而无需使用传统的流体布局技巧如浮动或定位。

Flex布局的关键特点包括:

  • 弹性伸缩:项目可以按照比例伸缩以填充容器,或者根据需要分配多余空间。
  • 方向控制:可以轻松改变项目在容器中的水平或垂直排列方向。
  • 对齐能力:提供了强大的对齐选项,使得元素在主轴和交叉轴上都能精准对齐。
  • 一维布局:专注于单一行或一列的布局,简化了多维度布局的复杂性。
  • 重新排序:无需改变HTML结构,仅通过CSS即可调整项目在容器中的顺序。

初识 flex 布局

下面是一个简单的Flex布局示例,展示了弹性伸缩特性。假设我们有一个容器,里面包含三个子元素,我们希望这三个子元素在任何屏幕宽度下都能等宽排列,并且能够自适应容器的宽度变化。

HTML 代码如下:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

对应的CSS 代码如下:

.container {
  display: flex; /* 设置容器为Flex布局 */
}
.item {
  flex: 1; /* 这是关键!每个.item占据容器等比例的空间,实现弹性伸缩 */
  border: 1px solid #000; /* 为了视觉上区分各个item,添加边框 */
  padding: 10px;
  box-sizing: border-box; /* 包含边框和内边距在元素的总宽度和高度中计算 */
}

在这个例子中,.container被设置为Flex容器,而它的子元素(.item)通过flex: 1;属性设置了伸缩行为。这意味着所有.item将会平分.container的可用空间。如果容器宽度变化,每个.item的宽度也会相应地自动调整,保持相等。这就是Flex布局中“弹性伸缩”的一个直观体现。

flex 属性详解

在上面的示例中,.item的属性之一“flex: 1;”,其实这是=是一个非常实用且强大的简写形式,它综合控制了Flex项目的三个关键方面的行为:扩展(flex-grow)、收缩(flex-shrink)和基础大小(flex-basis)。具体来说,flex: 1;等价于flex: 1 1 0%;,这分别对应于以下三个属性的设置:

  1. flex-grow: 设定为1意味着当Flex容器有多余空间时,该Flex项目会按比例分配这部分空间。如果所有的Flex项目都设定了相同的flex-grow值(例如都是1),那么它们会均等地分享容器的剩余空间。值越大,项目获取的额外空间比例也越大。
  2. flex-shrink: 同样设定为1,这决定了当Flex容器空间不足时,项目愿意缩小自己的大小以适应容器。所有项目的flex-shrink默认值都是1,意味着它们会等比例缩小。如果设置为0,则项目大小不会因为容器空间不足而缩小。
  3. flex-basis: 设置为0%,意味着在计算分配多余空间前,项目没有预先设定的基础大小(或者说基础大小非常小,接近于0)。这通常意味着项目的初始大小将主要由其内容决定,但随后会根据flex-grow分配剩余空间。因此,即使flex-basis设置为0%,一旦考虑到flex-grow,项目仍会扩展以填满分配给它的空间。

在CSS的Flex布局中,除了flex-grow, flex-shrink, 和 flex-basis这三个重要属性外,还有其他几个核心属性对于理解和应用Flex布局至关重要:

  1. flex-direction: 此属性决定了Flex项目在容器中的排列方向,从而定义了主轴的方向。可用值包括:

    • row(默认值):项目沿水平方向排列,从左到右。
    • row-reverse:项目沿水平方向排列,但从右到左。
    • column:项目沿垂直方向排列,从上到下。
    • column-reverse:项目沿垂直方向排列,但从下到上。
  2. flex-wrap: 控制Flex项目在一行中无法完全放下时是否换行以及如何换行。可用值包括:

    • nowrap(默认值):项目都在同一行,超出部分被隐藏。
    • wrap:项目可以换行,第一行在上方。
    • wrap-reverse:项目可以换行,第一行在下方。
  3. align-items: 定义了Flex项目在交叉轴(与主轴垂直的轴)上的对齐方式。需要注意的是align-items作用范围限于单行内的每个项目。也就是说,它会影响每个Flex行内部的项目对齐,而不是行与行之间的关系。可用值包括:

    • stretch(默认值,仅当align-items未在项目上设置时):拉伸以填满容器。
    • flex-start:项目位于容器的起始位置。
    • flex-end:项目位于容器的结束位置。
    • center:项目居中对齐。
    • baseline:项目基于文本基线对齐。
  4. align-content: 主要用于多行Flex布局中,用于调整多行Flex项目之间的对齐方式。当Flex容器的flex-wrap属性设置为wrap或wrap-reverse,即容器内的项目可以跨越多行时,align-content才会生效。它的作用是对整个Flex行集进行对齐,而不是单个Flex项目。换句话说,align-content控制的是行与行之间的空间分配。可用值包括:

    • stretch(默认值):默认情况下,Flex行会被拉伸以填满整个容器在交叉轴上的可用空间。
    • flex-start:所有行都堆叠在交叉轴的起始位置。
    • flex-end:所有行都堆叠在交叉轴的结束位置。
    • center:所有行居中对齐在交叉轴上。
    • space-between:在每行之间均匀分配空间,第一行和最后一行分别贴紧容器的起始和结束位置。
    • space-around:在每行之间以及行的外部均匀分配空间,每行两侧的空间相等。
  5. justify-content: 定义了Flex项目在主轴上的对齐方式。

    • flex-start(默认值):项目位于容器的起始位置。
    • flex-end:项目位于容器的结束位置。
    • center:项目居中对齐。
    • space-between:项目之间均匀分配空间,首尾项目分别靠边。
    • space-around:项目周围均匀分配空间。
    • space-evenly:项目之间以及项目与容器边缘之间均匀分配空间。
  6. justify-items:justify-items是Grid布局模型中的属性,并不是flex布局中的属性,梳理在这里是因为这个属性容易搞混,这里特别注意。

  7. flex-flow: 是flex-direction和flex-wrap的简写。如“flex-flow: row wrap; ”

  8. flex:是一个简写属性,它结合了flex-grow、flex-shrink和flex-basis三个属性,允许你更便捷地控制Flex项目在容器中的伸缩行为和初始大小。

  9. align-self: 类似于align-items,但允许单个Flex项目覆盖容器的默认对齐方式。

align-items与align-content区别

在CSS Flex布局中,理论上可以同时设置align-items和align-content属性,但它们的作用范围和适用场景不同,这导致在某些情况下它们的组合使用可能不会像预期那样工作。

  • align-items

用于单行或多行Flex容器中,控制容器内每一行的子元素在交叉轴上的对齐方式。如果Flex容器只有一行,align-items将决定所有子元素的对齐;如果有多个行(flex-wrap设为wrap或wrap-reverse),并且行的总高度没有填满容器的交叉轴尺寸,align-items仍然会影响每行内元素的对齐。

  • align-content

主要用于有多行的Flex容器,控制行与行之间的对齐方式以及行间空间的分配。当Flex容器有多行并且具有额外的交叉轴空间时(即行没有填满容器的高度或宽度时),align-content才起作用。如果只有一行或者行完全填满了容器的交叉轴,则align-content没有任何视觉效果。

总来看,具体的区别体现在三个方面:

  1. 应用场景:align-content主要应用于多行Flex容器,当项目跨越多行时才有效;而align-items适用于所有Flex容器,无论是单行还是多行。
  2. 作用对象:align-content调整的是多行之间的空间分布,影响的是整个Flex行集;而align-items直接影响单行内每个项目的对齐方式。
  3. 默认行为:在单行Flex容器中,align-content的设置不会产生视觉效果,因为它主要是为多行布局设计的。

因此,需要注意的是,当同时设置这两个属性时,如果Flex容器内只有单行,align-content将不产生任何效果,因为它是针对多行布局设计的。而在多行布局中,尽管两者可以共存,但align-items主要控制单行内部的对齐,而align-content则负责行间的对齐和空间分配。在某些情况下,如果align-items和align-content有冲突的值(比如同时设置了align-items: center和align-content: flex-start),具体表现可能会根据浏览器的实现细节有所不同,但通常align-items对单行内元素的直接对齐效果优先。

因此,理解它们各自的用途并在适当的情况下使用是非常重要的。在大多数布局需求中,你会根据布局是否有多行来选择使用align-items或align-content,而不是同时使用它们来达到不同的效果。

justify-items与justify-content区别

在CSS中,justify-content和justify-items是两个用于不同布局模型的对齐属性,它们之间存在一定的区别:

justify-items

  • 应用范围:justify-items是Grid布局模型中的属性,用于设置Grid容器内Grid项在行轴(类似于Flex布局的主轴)上的对齐方式。
  • 功能描述:与justify-content不同,justify-items作用于Grid布局中的单个项目,控制每个单独Grid项在行轴上的对齐方式,而不是整个Grid容器的内容分布。
  • 可选值:包括start、end、center、stretch(默认值)等,具体取决于Grid项的大小和Grid容器的设置。

justify-content

  • 应用范围:justify-content是Flex布局模型中的属性,用于设置Flex容器中Flex项目在主轴上的对齐方式。
  • 功能描述:它控制容器内所有Flex项目作为一个整体,在主轴方向上的分布和对齐。例如,可以设置项目在容器内水平居中、两端对齐等。
  • 可选值:包括flex-start、flex-end、center、space-between、space-around以及space-evenly等。

justify-content和justify-items是两个用于不同布局模型的对齐属性,因此肯定是不能同时使用。

今天分享的内容,就这么多了,不知道小伙伴能理解吗?如果有不理解的地方或者是我哪里有错误,敬请在评论区指出来,共同进步哦。

喜欢就关注一下吧.gif

  • 35
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凡夫贩夫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值