寻根溯源话布局

一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。

记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐。

然而很快就失望的发现 CSS 中并不存在 float: center 的写法,那么 text-align: centerverticle-align: center 是否可行呢?答案也是否定的。

这两个属性只能用于行内元素,对于块级元素的布局是无效的。

在网页布局没有进入 CSS 的时代,排版几乎是通过 table 元素实现的,在 table 的单元格里可以方便的使用 alignvalign 来实现水平和垂直方向的对齐,随着 Web 语义化的流行,这些写法逐渐淡出了视野。

CSS 标准为我们提供了 3 种布局方式:标准文档流浮动布局定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求,比如实现水平居中可以使用 margin: 0 auto,实现水平垂直同时居中可以如下设置:

1

.dad {
position: relative;
}
.son {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

2

.dad {
position: relative;
}
.son {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}

这些写法都存在一些缺陷:缺少语义且不够灵活。

我们需要的是通过 1 个属性就能优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应。

在这样的需求下,CSS 的第 4 种布局方式诞生了,这就是我们今天要重点介绍的 flex 布局。

flex 基本概念

使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: center 实现垂直居中。

#dad {
display: flex;
justify-content: center;
align-items: center
}

就是这么简单,大功告成。

我们从justify-content 和 align-items 两个基本概念开始说起。

说来也不难,flex 的核心的概念就是 容器

容器包括外层的 父容器 和内层的 子容器,轴包括 主轴交叉轴,可以说 flex 布局的全部特性都构建在这两个概念上。

flex 布局涉及到 12 个 CSS 属性(不含 display: flex),其中父容器、子容器各 6 个。不过常用的属性只有 4 个,父容器、子容器各 2 个,我们就先从常用的说起吧。

1. 容器

容器具有这样的特点:父容器可以统一设置子容器的排列方式,子容器也可以单独设置自身的排列方式,如果两者同时设置,以子容器的设置为准。

1.1 父容器

  • 设置子容器沿主轴排列:justify-content

justify-content 属性用于定义如何沿着主轴方向排列子容器。

设置子容器如何沿交叉轴排列:align-items

align-items 属性用于定义如何沿着交叉轴方向分配子容器的间距。

baseline:基线对齐,这里的 baseline 默认是指首行文字,即 first baseline,所有子容器向基线对齐,交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。

stretch:子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

1.2 子容器

  • 在主轴上如何伸缩:flex

子容器是有弹性的(flex 即弹性),它们会自动填充剩余空间,子容器的伸缩比例由 flex 属性确定。

flex 的值可以是无单位数字(如:1, 2, 3),也可以是有单位数字(如:15px,30px,60px),还可以是 none 关键字。

子容器会按照 flex 定义的尺寸比例自动伸缩,如果取值为 none 则不伸缩。

虽然 flex 是多个属性的缩写,允许 1 - 3 个值连用,但通常用 1 个值就可以满足需求,它的全部写法可参考下图。

  • 单独设置子容器如何沿交叉轴排列:align-self

每个子容器也可以单独定义沿交叉轴排列的方式,此属性的可选值与父容器 align-items 属性完全一致,如果两者同时设置则以子容器的 align-self 属性为准。

2. 轴

如图所示, 包括 主轴交叉轴,我们知道 justify-content 属性决定子容器沿主轴的排列方式。

align-items 属性决定子容器沿着交叉轴的排列方式。

那么轴本身又是怎样确定的呢?在 flex 布局中,flex-direction 属性决定主轴的方向,交叉轴的方向由主轴确定。

  • 主轴

主轴的起始端由 flex-start 表示,末尾段由 flex-end 表示。不同的主轴方向对应的起始端、末尾段的位置也不相同。

交叉轴

主轴沿逆时针方向旋转 90° 就得到了交叉轴,交叉轴的起始端和末尾段也由 flex-startflex-end 表示。

上面介绍的几项属性是 flex 布局中最常用到的部分,一般来说可以满足大多数需求,如果实现复杂的布局还需要深入了解更多的属性。

flex 进阶概念

设置换行方式:flex-wrap

决定子容器是否换行排列,不但可以顺序换行而且支持逆序换行。

逆序换行是指沿着交叉轴的反方向换行。

  • 轴向与换行组合设置:flex-flow

    flow 即流向,也就是子容器沿着哪个方向流动,流动到终点是否允许换行,比如 flex-flow: row wrapflex-flow 是一个复合属性,相当于 flex-direction 与 flex-wrap 的组合,可选的取值如下:

    • rowcolumn 等,可单独设置主轴方向

    • wrapnowrap 等,可单独设置换行方式

    • row nowrapcolumn wrap 等,也可两者同时设置

  • 多行沿交叉轴对齐:align-content

    当子容器多行排列时,设置行与行之间的对齐方式。

2. 子容器

  • 设置基准大小:flex-basis

    flex-basis 表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度,主轴为纵向时代表高度。

  • 设置扩展比例:flex-grow

    子容器弹性伸展的比例。如图,剩余空间按 1:2 的比例分配给子容器。

  • 设置收缩比例:flex-shrink

    子容器弹性收缩的比例。如图,超出的部分按 1:2 的比例从给子容器中减去。

  • 设置排列顺序:order

    改变子容器的排列顺序,覆盖 HTML 代码中的顺序,默认值为 0,可以为负值,数值越小排列越靠前。

以上就是 flex 布局的全部属性,一共 12 个,父容器、子容器各 6 个,可以随时通过下图进行回顾。

css相关,flex布局全通!的更多相关文章

  1. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  2. CSS的flex布局(转载)

    我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...

  3. css的flex布局调试

    学习经验-css的flex布局 今天遇到一个小问题 在给三个div布局时,设置父元素display:flex 此时三个div的宽度均为50%,他们并没有超出屏幕的宽度,还是撑满了父元素. 为什么呢? ...

  4. flex布局全解析

    前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...

  5. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  6. 详解CSS的Flex布局

    本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式.通过Flex布局,可以很优雅地解决很多CSS布局的问题.下面会分别介绍容 ...

  7. CSS之FLex布局介绍

    网页布局(layout)是CSS的一个重点应用. img 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如, ...

  8. CSS之Flex 布局:语法篇

    网页布局(layout)是 CSS 的一个重点应用. ​ 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如 ...

  9. CSS之Flex 布局

    Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...

随机推荐

  1. AtCoder Grand Contest 055题解

    我太菜啦!!!md,第一题就把我卡死了...感觉对构造题不会再爱了... A - ABC Identity 先来看这个题吧,题意就是给定你一个字符串,让你将这个字符串最多分成6个子串,使得每个字符都在 ...

  2. hdu 1027 Ignatius and the Princess II(正、逆康托)

    题意: 给N和M. 输出1,2,...,N的第M大全排列. 思路: 将M逆康托,求出a1,a2,...aN. 看代码. 代码: int const MAXM=10000; int fac[15]; i ...

  3. zabbix 报警发送qq邮件

    1.开启QQ邮箱的IMAP/SMTP服务,获取授权码 获取授权码:点击[开启]按钮,编辑短信发送,即可获得授权码 2.配置 /etc/mail.rc 添加下列配置: [ set from=XXX@qq ...

  4. Redis源码分析(intset)

    源码版本:4.0.1 源码位置: intset.h:数据结构的定义 intset.c:创建.增删等操作实现 1. 整数集合简介 intset是Redis内存数据结构之一,和之前的 sds. skipl ...

  5. 基于大量图片与实例深度解析Netty中的核心组件

    本篇文章主要详细分析Netty中的核心组件. 启动器Bootstrap和ServerBootstrap作为Netty构建客户端和服务端的路口,是编写Netty网络程序的第一步.它可以让我们把Netty ...

  6. 手把手教你学Dapr - 5. 状态管理

    上一篇:手把手教你学Dapr - 4. 服务调用 介绍 使用状态管理,您的应用程序可以将数据作为键/值对存储在支持的状态存储中. 您的应用程序可以使用 Dapr 的状态管理 API 使用状态存储组件来 ...

  7. 开源支持东财自动交易的简单量化交易框架pytrader

    pytrader是基于 easytrader 和 easyquotation 的量化交易框架,支持东方财富自动交易,支持进行策略回测. 开源地址:https://github.com/jadepeng ...

  8. ubuntu更換清華軟件源

    打开软件源的编辑sudo gedit /etc/apt/sources.list 软件源: Ubuntu--更改国内镜像源(阿里.网易.清华.中科大) 打開軟件源文件進行修改: 使用 sudo vim ...

  9. 提升开发效率的notepad++一些快捷方法(实体类的创建和查询sql语句的编写)

    新手要创建数据库表中,对应字段名的实体类,是不是感觉很麻烦,可以用notepad++快速的把实体类中的字段名进行排版,随后直接粘入idea使用 下面是navicat的演示 选择一个表,右键选择设计表 ...

  10. Roslyn 编译器Api妙用:动态生成类并实现接口

    在上一篇文章中有讲到使用反射手写IL代码动态生成类并实现接口. 反射的妙用:C#通过反射动态生成类型继承接口并实现 有位网友推荐使用 Roslyn 去脚本化动态生成,今天这篇文章就主要讲怎么使用 Ro ...