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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序之 flex 布局最详细讲解 !!!
flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何容器都可以指定为 flex 布局
Gorit
2021/12/08
17.2K2
微信小程序之 flex 布局最详细讲解 !!!
移动开发-Flex布局
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,flex布局中默认是不换行的
小城故事
2022/11/12
1.3K0
看完这篇,对flex布局还不熟悉,那就来找我(flex布局最全详解)
传统的页面布局,基于盒子模型margin + border + padding + content,依赖 display + position + float。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
javascript艺术
2021/05/28
10K0
看完这篇,对flex布局还不熟悉,那就来找我(flex布局最全详解)
再不学 flex 就不会写布局了
块状元素居中是一个老生常谈的话题,之前面试的时候考官也曾问到过这个。下面写几种常见的块状元素居中的方式。
李振
2021/11/26
3270
再不学 flex 就不会写布局了
前端样式布局flex
flex是flexible Box的缩写,意为“弹性布局”,用来为盒装模型提供的最大的灵活性,任何一个容器都可以指定为flex布局。
有勇气的牛排
2023/06/25
2890
flex 弹性布局常用属性
flex 是 Flexible Box 的缩写, 意为弹性布局。用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局
很酷的站长
2022/12/28
5190
flex 弹性布局常用属性
FLex布局详解
其余效果图 可自行复制代码,到自己vscode进行演示,可以更快的了解到flex的强大之处😼😼😼
心安事随
2024/07/29
1230
FLex布局详解
移动web开发之flex布局(弹性布局)
flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
星辰_大海
2020/09/30
1.1K0
初识flex布局
弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 使用方法:父元素设置display:flex
切图仔
2022/09/08
7740
初识flex布局
Flex布局
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
超然
2018/08/03
1.6K0
flex布局详细
Flex 是 Flexible Box 的缩写,意为“弹性布局”或者“弹性盒子”,是 CSS3 中的一种新的布局模式,可以简便、完整、响应式地实现各种页面布局,当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前,几乎所有的浏览器都支持 Flex 布局。
FGGIT
2024/10/15
1650
flex布局详细
css3 flex弹性布局详解
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
忆愿
2024/07/30
2540
css3 flex弹性布局详解
Flex布局
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display:flex; display:inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀 .box{ display:-webkit-flex; display: flex; } 解决兼容性问题 .box{ display:-webkit-flex;/*Chrome,Safari,Opera*/ display:-
pitaojin
2018/05/25
1.6K0
写给 Android 开发的小程序布局指南,Flex 布局!
最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的。
Android技术干货分享
2019/07/04
1.1K0
Flex布局
注:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
且陶陶
2023/04/12
1.5K0
Flex布局
FLEX布局
FLEX布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。
WindRunnerMax
2020/08/27
1.4K0
CSS3中Flex布局(弹性布局)
Flex是Flexible Box的缩写,就是灵活的弹性页面布局。 作用是为盒子模型提供强大的灵活性功能;
Javanx
2019/09/04
6650
CSS3中Flex布局(弹性布局)
Flex布局
Flex布局 通过给父盒子添加flex属性,来控制子盒子的位置和排列方式 常见的父项属性 flex-direction设置主轴方向 默认主轴是水平的x轴 主轴和侧轴是会变化的, flex-direction 设置谁为主轴,剩下的就是侧轴 属性值 说明 row 从左到右 默认值 row-reverse 从右到左 column 从上到下 column-reverse 从下到上 justify-content 设置主轴上的子元素排列方式 属性值 说明 flex-start 从头开始,主轴是x轴。则左
小丞同学
2021/08/16
1.3K0
Flex布局教程
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
訾博ZiBo
2025/01/06
1080
Flex布局教程
CSS-flex 布局
原文链接:https://note.noxussj.top/?source=cloudtencent 为什么要使用 flex 布局? flex 布局是目前比较流行的一种布局,因为它十分简单灵活,区区简
菜园前端
2023/04/16
4360
相关推荐
微信小程序之 flex 布局最详细讲解 !!!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验