潜入FLEXBOX——CSS弹性布局
介绍
Flexbox是CSS3中的一种新的布局模式,旨在满足现代Web的更复杂的需求。本文将详细介绍新近稳定化的Flexbox语法。浏览器支持将迅速增长,因此,当支持范围足够使Flexbox实用时,您将处于领先地位。如果您想知道它的作用和作用,请继续阅读!
为什么需要Flexbox?
长期以来,作者一直使用表,浮点数,内联块和其他CSS属性来布置其网站内容。但是,这些工具都不是为当今我们制作的复杂网页和Web应用程序设计的。垂直居中等简单的事情需要工作。诸如灵活的网格布局之类的复杂事物非常艰巨,以至于自己动手做就很难,因此CSS网格框架获得了成功。但是,如果有这么多项目需要做这些事情,那为什么不那么容易呢?Flexbox旨在改变这一切。
规格状态和浏览器支持
Flexbox规范已经进行了3年以上。各种浏览器都实验性地实现了不同的版本。2012年9月,Flexbox语法的第三个主要修订版本达到了W3C候选推荐标准。这意味着W3C对当前语法感到满意,并鼓励浏览器供应商实施它。浏览器正在迅速采用Flexbox。如本文所述,Chrome 22 +,Opera 12.1+和Opera Mobile 12.1+已支持Flexbox。Firefox 18和Blackberry 10即将推出。我建议在受支持的浏览器中阅读本文,以查看工作示例。
概念和术语
尽管Flexbox可以轻松创建过去很难或不可能的布局,但要花一些时间来习惯Flexbox的工作方式。新的术语和新的抽象可能会成为使用Flexbox的障碍,因此让我们提前对其进行讨论。
Flexbox由Flex容器和Flex项目组成。通过将元素的显示属性设置为flex
或来声明Flex容器inline-flex
。与flex
容器一起渲染为块。随着inline-flex
容器被内联渲染。
本文将在所有示例中显示所有适当的供应商前缀。
Flex容器的每个子代都是Flex项目。可以有任意数量的弹性物料。Flex容器外部和Flex项目内部的所有内容均照常渲染。简而言之,Flexbox定义了Flex项目在Flex容器内部的布局方式。
这是一个声明Flex容器的示例。
.flex-container {
display: -webkit-flex;
display: flex;
}
伸缩线
Flex项目沿着Flex线位于Flex容器内部。默认情况下,每个Flex容器只有一条Flex Line。
这是一个简单的示例,显示了默认情况下放置的两个项目:沿着水平弯曲线,从左到右。
写作模式
自定义Flexbox的重要部分是更改柔线的方向。默认情况下,“伸缩线”沿文本方向移动:从左到右,从上到下。
有一个名为“ 写作模式”的新功能的W3C工作草案。书写模式是一种从右到左甚至垂直书写文本的新方法,就像某些语言一样。
编写模式尚在开发中,但Chrome当前支持direction
CSS属性。如果我们将上一个示例中的方向设置为rtl
(从右到左),那么不仅文本从右到左绘制,而且Flex Line也会改变方向,从而改变页面布局。
这可以弄清楚为什么许多Flexbox术语如此抽象。当您不对页面语言进行任何假设时,您不能只说“右”,“左”,“上”和“下”。
主轴和横轴
为了抽象化书写模式,Flexbox使用了“ 主轴”和“ 交叉轴”的概念。伸缩线跟随主轴。横轴垂直于主轴。
每个轴的起点,终点和方向的名称如下:
- 主要开始
- 主端
- 主方向(有时称为流向)
- 交叉开始
- 交叉端
- 横向
在继续之前,了解主要和交叉术语至关重要。Flexbox中的所有内容都与这些轴有关。在我们所有的示例中,写入模式都是从左到右,从上到下,但是您必须记住,并非总是如此。
Flex容器的属性
弹性方向
将flex-direction
允许您更改Flex容器的轴。默认值flex-direction
是row
。使用此值,Flex项将沿方向布置writing-mode
。同样,这表示默认情况下从左到右,从上到下。其他值如下:
- row-reverse:交换主起点和主终点。如果书写模式从左到右,则Flex项目现在从右到左布置。
- 列:交换了主轴和交叉轴。如果书写系统是水平的,则现在将弹性项目垂直放置。
- column-reverse:与column相同,但相反。
让我们以前面的示例为例,将更flex-direction
改为column
。
现在,我们的Flex项目正在垂直布置。
证明内容
“ justify-content
弹性容器”的属性可调整弹性项目在主轴上的位置。可能的值为:
- flex-start(默认)
- 柔性端
- 中央
- 间隔
- 周围空间
在这里,我们设置justify-content
为center
使“伸缩项”以“主轴”为中心:
flex-start
,flex-end
和center
非常简单。space-between
并space-around
以更微妙的方式在Flex项目之间分配空白。规范中的此图最好地说明了这一点:
对齐项目
align-items
是对...的补充justify-content
。align-items
调整“弹性项目”在横轴上的放置方式。可能的值为:
- flex-start(默认)
- 柔性端
- 中央
- 基准线
- 伸展
在这里,我们设置align-items
为center
使“伸缩项”以“横轴”为中心:
同样,flex-start
,flex-end
,和center
的值是简单的。stretch
也很简单:它使Flex项从Cross Cross Start延伸到Cross End。baseline
使弹性项目沿其基线对齐。基线是根据弹性项目的内容计算的。Flexbox规范中的以下图片可以最好地说明这一点:
柔性包装
到目前为止,每个Flex容器只有一个Flex Line。使用flex-wrap
可以创建具有多个Flex Line的Flex容器。flex-wrap的可能值为:
- nowrap(默认)
- 包裹
- 绕回
如果flex-wrap
将设置为wrap
,则如果一条Flex Line上没有足够的空间容纳这些Flex Line,则它们会缠绕到其他Flex Lines上。沿“横轴”方向添加了附加的“柔线”。
wrap-reverse
与换行相同,除了新的“柔线”将在“交叉轴”上以相反的方向添加。
对齐内容
align-content
修改的行为flex-wrap
。它与相似align-items
,但是不是对齐Flex项目,而是对齐Flex线。如您所料,其可能的值类似:
- 拉伸(默认)
- 弹性启动
- 柔性端
- 中央
- 间隔
- 周围空间
这些值是analagous他们在同行中justify-content
和align-items
。
柔性流
flex-flow是一个速记flex-direction和flex-wrap。 flex-flow:[flex-direction] [flex-wrap] 例如: gistfile1.css .flex-container {
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap;
}
弹性项目的属性
弹性项目是弹性容器的任何直接子代。Flex容器中的文本也被视为Flex项目。 Flex项的内容将正常显示。例如,在Flex项上设置float不会执行任何操作,但是Flex项内部可能会有一个float元素。 弹性项目据说有一个主尺寸和一个十字尺寸。Main Size是Flex项目在主轴尺寸中的大小。交叉尺寸是弹性项目在交叉轴尺寸中的尺寸。有效地,根据伸缩容器的轴,伸缩项目的宽度或高度可以是其主尺寸或横向尺寸。 以下属性调整Flex项目的行为。 订购
order是最简单的一种。设置“弹性项目”的顺序会在渲染时调整其顺序。在此示例中,我们将order一个Flex项目的设置为-1,从而使其在其他Flex项目之前显示。
余量
您可能熟悉正常作用的margin: auto;
。在Flexbox中,它执行相同的操作,但功能更强大。“自动”边距将占用额外的空间。它可用于将Flex项目推入不同的位置。
自我调整
align-self
Flex Items 的属性有效地覆盖了align-items
该项目的Flex Container的属性。它具有与以下相同的可能值align-items
:
- 拉伸(默认)
- 弹性启动
- 柔性端
- 中央
- 基准线
柔性
现在我们终于要把Flex放在Flexbox中。
flex
指定当在主轴上分配可用空间时,Flex项目的优先级如何。让我们一次查看一个通用值。
flex:[数字]
此语法指定一个数字,该数字表示此Flex项目应占用的可用空间比率。
flex:初始
flex
值设置为的Flex项initial
在有可用空间时将不灵活,但在需要时可以缩小。flex:自动
flex
值设置为的Flex项auto
将沿主轴完全灵活。auto
目前可在Opera 12.11中使用,但不能在Chrome 23.0.1271.95中使用。您通常可以使用解决此问题flex: 1;
。弹性:无
flex
值设置为的Flex项目none
将在所有情况下完全不灵活。先进的弹性
flex
也可以用作用于指定的简写flex-grow
,flex-shrink
和flex-basis
在一个声明:flex:[flex-grow] [flex-shrink] [flex-basis]
大多数用例不需要此语法。此外,它需要对flex算法有更专业的了解。如果您觉得自己很勇敢,请看一下规格书。
您还可以指定每一个
flex-grow
,flex-shrink
以及flex-basis
作为单独的属性。我强烈建议您反对:使用flex
速记时,将更合理的默认值应用于未给出的值。能见度
实施后,
visibility: collapse;
它将visibility: hidden;
与display: none;
Flex项目不同。使用collapse
,该元素将影响Flex容器的Cross Size,但不会显示该元素,也不会占用主轴上的任何空间。这对于动态添加和删除Flex项目而不影响Flex容器的交叉大小很有用。当前,
visibility: collapse;
似乎没有在任何浏览器中正确实现。visibility: collapse;
似乎与visibility: hidden;
当前实现中的功能相同。我希望这种情况很快会改变。你可以看到如何良好的嘲笑式例如
collapse
将工作在规范中。结论
如您所见,Flexbox是一种功能强大的新布局模式,它将彻底改变网站的布局。您还可以看到,它需要全新的思维方式。希望本文已为您准备好开始使用Flexbox创建网站。我不认识你,但在我看来,未来真是棒极了。
- 格雷格·史密斯(Greg Smith)发布
潜入FLEXBOX——CSS弹性布局的更多相关文章
- css弹性布局
1.弹性布局是什么 在移动端一种方便的布局方式,打破了之前用浮动,定位的布局,更加灵活. 2.弹性布局的格式 包含父元素和子元素,有对应的属性应用在父元素和子元素达到布局的目的 3.父元素的属性 要开 ...
- [前端随笔][css] 弹性布局
说在前面 弹性布局,顾名思义就是有弹性,能够根据屏幕/当前空间大小自由伸缩的.使用弹性布局可以很好的适应各种尺寸的客户端. 关键代码 display:flex; 设定元素为弹性布局 <文档传送门 ...
- html/css弹性布局的几大常用属性详解
弹性布局的名称概念: 1.容器:需要添加弹性布局的父元素:项目:弹性布局容器中的每一个子元素,称为项目. 2.主轴:在弹性布局中,我们会通过属性规定水平/垂直方向(flex-direction)为主轴 ...
- Flexbox盒子弹性布局
Can I Use? 2. 概念: 当你给一个元素使用了flexbox模块,那么它的子元素就会指定的方向在水平或者纵向方向排列.这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间. < ...
- React Native 弹性布局FlexBox
React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the f ...
- CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
- 简单探讨弹性布局flex
css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...
- CSS经典布局之弹性布局
当我们在浏览浏览器的时候,经常会放大/缩小浏览器的显示比例,或者在不同的设备上.所处的分辨率也不尽同样. 因此.我们须要学习一个新的知识:弹性盒模型. 弹性盒模型 实现项目对齐,方向,排序(即使项目大 ...
- 【RN - 基础】之FlexBox弹性布局
前言 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同的屏幕,为盒装模型提供最大的灵活 ...
随机推荐
- Nuget一键打包上传以及高级应用
Nuget是什么不用多说,大家应该也没少用过Nuget, 不少人也应该使用过工具打Nuget包,接下来先一步步说明如何使用脚本完成Nuget一键打包 Nuget一键打包 配置Nuget环境 下载地址: ...
- Gradle 多环境URL请求设置
在开发过程中,多环境配置是经常遇到的,比如在Android开发过程中,在不同环境上请求服务器的URL是不同的,使用Gradle进行管理,是非常方便的. 首先查看工程目录结构: 使用AndroidStu ...
- 萌新带你开车上p站(终极番外)
本文由“合天智汇”公众号首发,作者:萌新 0x01前言 这关其实和pwn关系不大,主要考察的都是linux下一些函数的操作,考察linux的基本功.涉及到的知识点包括一些经典的函数原型.IO重定向.文 ...
- Java—线程的生命周期及线程控制方法详解
线程生命周期5种状态 介绍 线程的生命周期经过新建(New).就绪(Runnable).运行(Running).阻塞(Bolocked)和死亡(Dead) 状态转换图 新建(New) 程序使用 ...
- 【雕爷学编程】Arduino动手做(44)---类比霍尔传感器
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...
- spark机器学习从0到1奇异值分解-SVD (七)
降维(Dimensionality Reduction) 是机器学习中的一种重要的特征处理手段,它可以减少计算过程中考虑到的随机变量(即特征)的个数,其被广泛应用于各种机器学习问题中,用于消除噪声 ...
- chrome "items hidden by filters"
今天更新chrome 后遇到console不能显示errors的问题,折腾一番后发现在console的Default levels中选择Default即可.
- [Unity UGUI图集系统]浅谈UGUI图集使用
**写在前面,下面是自己做Demo的时候一些记录吧,参考了很多网上分享的资源 一.打图集 1.准备好素材(建议最好是根据图集名称按文件夹分开) 2.创建一个SpriteAtlas 3.将素材添加到图集 ...
- [Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件
前言, Blazor Assembly 需要最少 1.9M 的下载量. ( Blazor WebAssembly 船新项目下载量测试 , 仅供参考. ) 随着程序越来越复杂, 引用的东西越来越多, ...
- 从零开始实现ASP.NET Core MVC的插件式开发(七) - 近期问题汇总及部分解决方案
标题:从零开始实现ASP.NET Core MVC的插件式开发(七) - 问题汇总及部分解决方案 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/12 ...