Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >48张小图带你领略Flex 布局之美

48张小图带你领略Flex 布局之美

作者头像
前端劝退师
发布于 2020-09-21 07:59:19
发布于 2020-09-21 07:59:19
1.5K02
代码可运行
举报
文章被收录于专栏:前端劝退师前端劝退师
运行总次数:2
代码可运行

前言

最近在项目中,遇到布局问题,有时候,需要堆叠很多的样式,去排版,一定程度上增加了代码量,那么有没有更加方便的布局方式呢??

48张图带你从0到1掌握flex布局方式。

flex布局在某种程度上,简便我们布局的一个难题,接下来的篇幅将介绍它的使用?

flex-布局详解

flex基本概念

要想熟练掌握flex布局的话,你需要理解两个概念:容器?

flex布局基本概念

从上面图来看,我们将flex布局分为两部分讲,容器

「轴」

  • 主轴(mian axis)
  • 交叉轴(cross axis)

容器

  • 父容器(container)
  • 子容器(item)

打个预防针,flex布局涉及到12个CSS属性,父容器,子容器各6个。

接下来先梳理常见的属性,不常见的放在进阶部分来梳理。

我们知道,包括主轴交叉轴,那么它们的方向是如何决定呢?我们直接从一张图看懂它?

flex轴的概念

默认情况下,「主轴」的方向是从左向右的,「交叉轴」垂直于主轴,逆时针方向90度,那么接下来我们看「flex-direction」是如何决定主轴的。讲这个之前,我们需要明白?

  • 交叉轴是由主轴决定的,主轴又是由flex-direction决定的。
  • flex-direction属性设置在父容器上,这样子才可以生效。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
flex-direction: row | row-reverse | column | column-reverse

flex-direction取值

首先布局如下?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="wrapper">
        <div class="flex1">子盒子#flex1: 1 </div>
        <div class="flex2">子盒子#flex2: 1 </div>
</div>

接下来,我们看看他们的效果吧?


flex-direction: row
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
flex-direction: row

效果?

flex-direction-row

「结论」

  • flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
  • 简单理解就是「主轴沿着水平方向向右」

flex-direction: row-reverse
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
flex-direction: row-reverse

效果?

flex-direction-row-reverse

我们可以看到这两个盒子的位置发生了变化,这个就是主轴起点和主轴终点位置「置换」的原因。

「结论」

  • 表现和row相同,但是置换了主轴起点和主轴终点。
  • 简单理解就是「主轴沿着水平方向向左」,与文本方向相反。

flex-direction: column
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
flex-direction: column

效果?

flex-direction-column

可以看到,子盒子的布局发生了变化,形成了在Y轴上的布局方式,并且书写方式跟布局一样。

「结论」

  • flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
  • 简单的理解,就是主轴变成Y轴方向,方向从上到下布局。

flex-direction: column-reverse
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
flex-direction: column-reverse

效果?

flex-direction-column-reverse

可以看到,子盒子的布局跟column差不多,唯一不同的是,方向上发生了变化。

「结论」

  • 表现和column相同,但是置换了主轴起点和主轴终点
  • 简单的理解,就是主轴变成Y轴方向,方向从下到上,与书写的方向相反。

容器

这里就分为「父容器」「子容器」,我们先来看看父容器?

父容器
  • justify-content: 「设置子元素在主轴方向上的对齐方式」
  • align-items:「设置子元素在交叉轴方向上的对齐方式」

父容器常见属性


justify-content

这个属性设置在父容器上,「决定子元素在主轴方向上的对齐方式」,我们看看它们具体表现吧?


justify-content: flex-start
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
justify-content: flex-start

效果?

justify-content-flex-start

「结论」,子元素沿着主轴方向开始对齐。


justify-content: flex-end
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
justify-content: flex-end

效果?

justify-content-flex-end

「结论」,子元素沿着主轴方向终点对齐。


justify-content: center
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
justify-content: center

效果?

justify-content-center

「结论」,子元素在主轴方向上水平居中。


justify-content: space-between
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
justify-content: space-between

效果?

justify-content-space-between

「结论」,子元素在主轴方向上「两端对齐,项目之间间隔相等」


justify-content: space-around
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
justify-content: space-around

效果?

justify-content-space-around

「结论」,子元素在主轴方向上「均匀排列每个元素,每个元素周围分配相同的空间」


align-items

这个属性设置在父容器上,「决定子元素在交叉轴方向上的对齐方式」,我们看看它们具体表现吧?


align-items: flex-start
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
align-items: flex-start

align-items-flex-start

「结论」,子元素在交叉轴方向上起点对齐。


align-items: flex-end
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
align-items: flex-end

align-items-flexend

「结论」,子元素在交叉轴方向上终点对齐。


align-items: center
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
align-items: center

align-items-center

「结论」,子元素在交叉轴方向上居中对齐。


align-items: baseline
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
align-items: baseline

align-items--baseline

「结论」,子元素在交叉轴方向上以文字基线对齐,具体不清楚的,可以自行百度。


align-items: stretch
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当你给父盒子(wrapper)设置属性
align-items: stretch

align-items-stretch

「结论」,这个属性是默认的,如果项目未设置高度或者设为 auto,将占满整个容器的高度。


子容器

先看张图片

子容器常见的属性

子容器的话,这里就介绍两个属性?

  • flex属性 定义在主轴是如何伸缩的
    • 子容器是有弹性的,它们会自动填充剩余空间,子容器的伸缩比由flex属性决定。
    • flex是多个属性的缩写,允许1-3个值的连写,具体参考上面的图。
  • align-self属性 「单独设置子容器如何沿交叉轴排列」
    • 每个子容器都可以单独定义沿交叉轴排列方式。
    • 该属性的取值跟父容器中的align-items属性一致,如果两者相同的话,则以子容器align-self属性为主。
flex作用规则
  • 三个属性的简写,是flex-grow flex-shrink flex-basis的简写
  • 常用简化写法?
    • flex:1 —> flex:1 1 0%;
    • flex:3 —> flex:3 1 0%;
    • 注意:flexbox布局和原来的布局是两个概念,部分css属性在flexbox盒子里面不起作用,eg:float, clear, column,vertical-align 等等
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
注意?flex-grow  flex-shrink flex-basis 这三个属性会在后续介绍

具体的flex取值问题,可以参照下面的图?

flex取值问题


「align-self作用规则」
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 起始端对齐
align-self : flex-start;

align-self-flexStart


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 末尾段对齐
align-self : flex-end;

align-self-flex-end


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
基线对齐// 末尾段对齐
align-self : baseline;

align-self-baseline

可以看到的话,它们对齐的方式是第一行文字的基线。


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
拉伸对齐
align-self : stretch;

align-items-stretch


flex更深入了解

上面介绍的常见几个属性掌握的话,基本上可以满足日常的开发布局需求,剩下的一些属性,接下来将梳理一遍,这样子的话,早日成为flex布局进阶者

父容器

  • 「flex-wrap」 设置换行方式
    • 绝对子容器是否可以选择换行,一般而言有三种状态,支持换行的话,也支持逆序换行。
  • 「flex-flow」 设置轴向与换行组合
    • 是 flex-direction 和 flex-wrap 的简写。
    • 所以只要掌握,flex-directionflex-wrap即可。
  • 「align-content」 多行沿交叉轴对齐方式
    • 当子容器多行排列时,设置行与行之间的对齐方式。

flex-wrap

设置子容器的换行方式,通常有三个取值?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
flex-wrap: wrap | nowrap | wrap-reverse

三种情况?


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 允许换行
flex-wrap : wrap

效果?

flex-wrap-wrap


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 不允许换行
flex-wrap : nowrap

效果?

flex-wrap-nowrap


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 允许逆向换行
flex-wrap : wrap-reverse

效果?

flex-wrap-wrapReverse


flex-flow

先来一张图?

flex-flow取值

更多取值信息请查看 flex-directionflex-wrap

可以查看MDN上,或者把之前的flex-directionflex-wrap 两者取值看过一遍,那么使用这个属性就没有问题啦,这里也就不过多的举例子了,取值有三种情况?

  • 单独设置flex-direction取值,比如
    • flex-flow: row | column
  • 单独设置flex-wrap取值
    • flex-flow: wrap | nowrap | wrap-reverse
  • 同时设置两者取值
    • flex-flow: row wrap flex-flow: column nowrap

align-content

这个属性是定义子容器在交叉轴的排列方式,也就是对齐方式。

首先上一张图?

align-content取值

根据这些取值,我们来看看布局效果吧?


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 起始端对齐
align-content: flex-start

效果?

align-content-flex-start


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 末尾段对齐
align-content: flex-end

效果?

align-content-flex-end


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 居中对齐
align-content: center

效果?

align-content-center


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 等间距均匀分布
align-content: space-between

效果?

align-content-space-around


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 等边距均匀分布
align-content: space-around

效果?

align-content-space-around


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 拉伸对齐
align-content: stretch

效果?

align-content-stretch


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 基线对齐
align-content: baseline

效果?

align-content-baseline


子容器

  • 「flex-grow」 设置扩展比例
  • 「flex-shrink」 设置收缩比例
  • 「flex-basis」 设置基准大小
  • 「order」 设置排列顺序

flex-grow

子容器弹性伸展的比例,简单理解,就是把剩余的空间按比例分配给子容器。

我们看个例子

flex-grow取值


flex-shrink

子容器弹性收缩的比例。简单理解,就是当你子容器超出的部分,会按照对应的比例给子容器减去对应的值。

我们来看下效果?

flex-shrink-取值为0

当取值为0时,就会溢出,那么我们给它们设置一个值?

flex-shrink-取值为1

这样子的超出的部分就会按照比列减去。


flex-basis

有几个点需要注意的是?

  • 在不伸缩的情况下,flex-basis给子容器设置大小才有作用。
  • 当主轴为横向时,即?
    • flex-direction:row | row-reverse
    • flex-basis设置的大小为宽度,并且会覆盖witdh值
  • 当主轴为纵向时,即?
    • flex-direction:column | column-reverse
    • flex-basis设置的大小为高度,并且会覆盖height值

我们来看看两种情况?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当主轴为横向时
flex-direction:row | row-reverse

效果?

flex-basis-主轴横向时


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
当主轴为纵向时
flex-direction:column | column-reverse

效果?

flex-basis-主轴纵向时


order
  • 每个子容器的order属性默认为0
  • 通过设置order属性值,改变子容器的排列顺序。
  • 可以是负值,数值越小的话,排的越靠前。

直接看效果图?

flex-order


总结

这个时候,是不是需要总结一下呢?

先看看子容器属性?

flex-子容器属性


再看看父容器属性?

flex-父容器属性

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端劝退师 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
超简单!Java 项目自动生成接口文档教程
你还在用 word、markdown 埋头苦干写接口文档?写文档这件事恐怕是每个开发都万分抗拒的事情了。本篇文章详细教你如何利用插件工具,在 IDEA 中自动生成 API 文档。
物立
2023/04/24
4.7K0
超简单!Java 项目自动生成接口文档教程
还手写文档?这个IDEA插件一键自动生成,爽!
每个开发都不想写文档。当你不想写接口文档时,可以通过安装插件在 IDEA 里实现自动同步,一边写代码一边同步接口文档给你的前端、测试同学。以下内容手把手教你怎么操作(这里仅面向使用 IDEA 编辑器、遵循 Java Spring 框架注释规范的同学):
一行Java
2023/02/23
1.4K1
还手写文档?这个IDEA插件一键自动生成,爽!
横空出世!IDEA 版 API 接口神器来了,一键生成文档!
每个开发都不想写文档。当你不想写接口文档时,可以通过安装插件在 IDEA 里实现自动同步,一边写代码一边同步接口文档给你的前端、测试同学。以下内容手把手教你怎么操作(这里仅面向使用 IDEA 编辑器、遵循 Java Spring 框架注释规范的同学):
物立
2023/02/20
3.7K0
横空出世!IDEA 版 API 接口神器来了,一键生成文档!
横空出世! IDEA 版 API 接口神器来了,一键生成文档
JetBrains公司的IntelliJ IDEA是一款非常受欢迎的Java集成开发环境,而Apifox Helper是一款IDEA插件,可以帮助开发者更快速地开发和调试应用程序。
Java king
2023/03/27
3K0
横空出世! IDEA 版 API 接口神器来了,一键生成文档
通过PHP注解Apidoc自动生成API接口文档在Webman框架
Apidoc 是一个通过解析注解生成Api接口文档的PHP composer扩展,兼容Laravel、ThinkPHP、Hyperf、Webman等框架。全面的注解引用、数据表字段引用,简单的注解即可生成Api文档,而Apidoc不仅于接口文档,在线接口调试、Mock调试数据、调试事件处理、Json/TypeScript生成、接口生成器、代码生成器等诸多实用功能,致力于提高Api接口开发效率。
Tinywan
2024/01/19
2K0
通过PHP注解Apidoc自动生成API接口文档在Webman框架
接口测试神器Apifox
Apifox = Postman + Swagger + Mock + JMeter
软件测试君
2020/09/07
1.5K0
接口测试神器Apifox
几个测试接口的好工具,效率加倍~
作为一名后端程序员,一定要对自己写的接口负责,保证接口的正确和稳定性。因此,接口测试也是后端开发中的关键环节。
程序员鱼皮
2023/10/23
9410
几个测试接口的好工具,效率加倍~
JApiDocs(自动生成接口文档神器)
注:官方文档中注明分组名称@description,但是实际应用中不需要加入注解,像下例所示,直接写注释即可。(类上写不写都行,方法上如果加上@description反而不显示) 例:
huofo
2022/03/18
1.3K0
JApiDocs(自动生成接口文档神器)
全自动生成!让你和接口文档说拜拜!!
平时已经加班加点去实现产品经理提出的复杂需求了,到最后还要写接口文档给前端的小伙伴对接,实在是让人有些沮丧 ε(┬﹏┬)3
永恒君
2022/12/06
3860
全自动生成!让你和接口文档说拜拜!!
简单快捷的分享操作:提升团队协作效率的利器 - Apipost 与 Apifox 之对比
在API驱动的现代软件开发中,接口文档的快速共享是团队协作的核心环节。然而,繁琐的文档分享流程可能导致跨部门沟通滞后、需求理解偏差,甚至延误项目交付。例如,某金融科技团队曾因接口文档传递效率低下,导致测试团队误用旧版接口参数,最终引发生产环境数据异常。由此可见,工具能否提供简单高效的文档分享功能,直接影响团队协作效率和项目质量。本文将以 Apipost 与 Apifox 为例,从功能设计、操作流程到实际场景,解析两者在分享操作上的差异及其对协作效率的影响。
用户11531559
2025/03/28
770
Spring-Boot + Swagger2 自动生成API接口文档
spring-boot作为当前最为流行的Java web开发脚手架,相信越来越多的开发者会使用其来构建企业级的RESTFul API接口。这些接口不但会服务于传统的web端(b/s),也会服务于移动端。在实际开发过程中,这些接口还要提供给开发测试进行相关的白盒测试,那么势必存在如何在多人协作中共享和及时更新API开发接口文档的问题。 假如你已经对传统的wiki文档共享方式所带来的弊端深恶痛绝,那么尝试一下Swagger2 方式,一定会让你有不一样的开发体验:
用户1212940
2022/04/13
6440
Spring-Boot + Swagger2 自动生成API接口文档
2021.8.13起,Github要求使用基于令牌的身份验证
remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
Vam的金豆之路
2021/12/01
2.6K0
2021.8.13起,Github要求使用基于令牌的身份验证
支持Dubbo接口文档生成的工具!
点击上方蓝色“程序猿DD”,选择“设为星标” 回复“资源”获取独家整理的学习资料! 作者 | 肥朝 来源 | https://mp.weixin.qq.com/s/JW0yPtaIeyYZCs2PuucICQ Introduce smart-doc是一款同时支持JAVA REST API和Apache Dubbo RPC接口文档生成的工具,smart-doc在业内率先提出基于JAVA泛型定义推导的理念, 完全基于接口源码来分析生成接口文档,不采用任何注解侵入到业务代码中。你只需要按照java-doc标准
程序猿DD
2023/04/04
1.3K0
支持Dubbo接口文档生成的工具!
ApiPost 快速生成在线接口文档!!
ApiPost是一个支持团队协作,并可直接生成文档的API调试、管理工具。它支持模拟POST、GET、PUT等常见请求,是后台接口开发者或前端、接口测试人员不可多得的工具 。使用者不仅可以利用apiopst调试接口,还可以书写相关注释(接口文档),方便的生成可读性好、界面美观的在线接口文档。
XD
2022/05/15
3.9K0
接口调试与文档生成:Apipost 与 Apifox 的深度考量
在当今数字化时代,软件开发项目的复杂性与日俱增,团队协作和开发效率的重要性不言而喻。其中,“接口调试”和“文档生成”成为贯穿整个开发流程的核心环节,对项目进度及质量的影响深远。在众多开发工具中,Apipost 和 Apifox 凭借出色的功能被广泛关注。本文将从多个关键维度,对 Apipost 和 Apifox 在接口调试与文档生成功能上的表现进行深度对比分析,为开发团队的工具选型提供参考。
多吃核桃
2025/02/24
980
接口调试与文档生成:Apipost 与 Apifox 的深度考量
PostMan 快快走开, ApiFox 来了, ApiFox 强大的Api调用工具
为什么要用ApiFox呢, 一般现在程序员开发测试, 一般都是PostMan, PostWoman等Api调用工具, 我之前也是一直在用, 但是今天我发现了一款相比于Postman更加好用的工具, 那就是ApiFox, 是通过一款公众号推荐给我的, 我开始还不以为然, 但是在仔细阅读后, 发现真的非常好用, 下面让我们来了解ApiFox
彼岸舞
2022/06/02
1K0
PostMan 快快走开, ApiFox 来了, ApiFox 强大的Api调用工具
Apifox是个啥?
大家好,我是码农飞哥---作为一名后端老码农,我做的大部分项目一般都是基于 Swagger 来管理 API 文档,基于 Postman 来做接口调试,基于 JMeter 来做接口性能测试,基于RAP 等工具 Mock API 数据。
码农飞哥
2024/01/03
5690
Apifox是个啥?
Vuepress + GitHub Actions 实现博客自动部署!
正常我们利用 Vuepress 搭建一个文档博客之后,往往都是通过如下步骤来部署一篇博客:
村雨遥
2022/03/14
1.5K1
Vuepress + GitHub Actions 实现博客自动部署!
Apifox 接口文档设计和调试教程【工具篇】
Apifox 不是一个传统的测试工具,Apifox 更像是一个团队协作工具,围绕着接口开发文档,为我们规范了开发的整个流程。
码哥字节
2022/10/28
2.7K0
Apifox 接口文档设计和调试教程【工具篇】
12年经验的大龄程序员,你猜他用什么写API文档?
今天这次我们深度 “盘” 一下 Eolink 这款免费 API 协作平台,围绕【智能生成+盘活 API 资产】这一功能上,到底投入了多大的开发成本,给我们带来了多少惊喜!
梦想橡皮擦
2022/12/07
3880
12年经验的大龄程序员,你猜他用什么写API文档?
推荐阅读
相关推荐
超简单!Java 项目自动生成接口文档教程
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验