关于FlexBox的布局
关于FlexBox的布局
基本要素
因为FlexBox是一整个模块并不是一个单独的属性,它涉及到很多东西包括它的所有设置属性。一些属性是需要被设置在容器(父级元素,称为『弹性容器』),而一些其他的属性需要被设置在子元素(称为『弹性项』)中。
如果常规布局是基于块布局与内联布局的方向流的,那么弹性布局就是基于“flex-flow流”。请看一下来自W3C规范的这张图,它解释了弹性布局的主要思想。
基本上,弹性项(flex item)会沿着主轴方向(main-start
到main-end
)或侧轴方向(cross-start
到cross-end
)排列。
- 主轴(
main axis
) - 弹性项主要是沿着弹性容器的主轴进行排列的。要注意一点,他不一定是水平的;这主要还是看flex-direction
属性(见下文)。 main-start | main-end
- 弹性项将由main-start
到main-end
方向放置在容器内。main size
- 弹性项在主轴方向的宽度或高度就是主轴的尺寸。弹性项主要的大小属性可以是宽度,也可以是高度属性,由哪一个对着主轴方向决定。cross axis
- 与主轴垂直相交的轴线就是侧轴。它的方向由主轴决定。cross-start | cross-end
- 弹性行是由弹性项填充起来的,它的配置是从容器的cross-start
开始,往cross-end
结束。cross size
- 弹性项在侧轴方向的宽度或高度就是cross size
。cross size
根据侧轴的方向来取决是宽度还是高度。
父级(弹性容器)属性
display
这个属性是定义在弹性容器上的;根据其值决定是内联还是块布局。这时它的直属下级将会变成flex文档流。
.container {
display: flex; /* or inline-flex */
}
需要注意CSS的columns在flex容器里没有效果。
flex-direction
这个是建立在主轴上的,从而定义了弹性项放置在容器的方向。FlexBox是单方向的布局概念。可以将弹性项视为主要布置在水平行或垂直列中。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row
(默认):在ltr
排版方式下从左向右排列;在rtl
排版方式下从右向左排列。row-reverse
:与row
排列方向相反,在ltr
排版方式下从右向左排列;在rtl
排版方式下从左向右排列。column
:类似于row
但是是顶部到底部column-reverse
:类似于row-reverse
但是是底部到顶部
flex-wrap
弹性项默认会全部集中在一行。你可以使用这个属性来改变这种情况,让他们根据你的需要进行自动换行。文档方向在这里也起作用,决定了新的一行被堆叠的方向。
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap
(默认):单行显示。在ltr
排版下,项目自左向右;在rtl
下,自右向左wrap
:多行显示。在ltr
排版下,项目自左向右;在rtl
下,自右向左wrap-reverse
:多行显示。与wrap
相反
flex-flow(定义在弹性容器中)
这个是flex-direction
和flex-wrap
属性的缩写版,它同时定义了弹性容器的主轴和侧轴。默认是row nowrap
。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content
这属性是用来定义主轴上的对齐方式的。当所有的弹性项在一行并且无法弹性伸展,或者可伸展但是达到了最大尺寸,它能帮助分配剩下的多余空间。并且当他们行内溢出时,这个属性也可以对项目对齐施加一些控制。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start
(默认):子项会从一行的起始处开始放置flex-end
:子项会从一行的结尾处开始放置center
:子项会集中在一行的中央space-between
:子项会被均匀的分布在行内;首项放置在一行的开始,尾项放置在一行的结束space-around
:子项会均匀的按照同等距离分布在一行。需要注意的是,在视觉上会觉得并不等距,因为所有子项在两侧都需要加上同等的空间。首项会与容器开始边缘有一个单位空间的距离,但是与下一项会有两个单位空间的距离,因为下一项也有它自己的适配空间。
align-items
这用来定义弹性项目在弹性容器的当前侧轴上的默认行为。可以认为是侧轴版的justity-content
。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start
:弹性项在侧轴起点边的外边距紧靠住该行在侧轴起始的边。flex-end
:弹性项在侧轴起点边的外边距紧靠改行在侧轴结尾的边。center
:弹性项会被放置在侧轴的中央。baseline
:弹性项会根据他们的基线对齐。stretch
(默认):在侧轴方向上拉伸弹性项以致填充满弹性容器。(任遵从min-width/max-width
)
align-content
这个属性会根据在侧轴上的额外空间来排列容器的行,类似于justify-content
在主轴在对齐单个弹性项的方式。
注意,这个属性对于只有单行的弹性项来说是没有效果的。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start
:行会紧靠容器的起始位flex-end
:行紧靠容器的结束位center
:行紧靠容器的中间位space-between
:每行会均匀分布;首行在容器起始处而最后行在容器结束处space-around
:每行根据相同的距离均匀的分布stretch
(默认):每行将会伸展以占用剩余的空间。
子项(弹性项)的属性
order
一般来说,弹性项会按照文档流的顺序进行布局。然而,order
属性可以控制他们出现在弹性容器中的顺序。
.item {
order: <integer>;
}
flex-grow
这个属性给予弹性项在需要的时候可以伸展的能力。它接收一个不带单位的值作为比例。它规定了在容器内的弹性项可以占用多少的可用空间。
如果所有的子项都设置了flex-grow
为1,那么容器内的剩余空间会被均匀的分配给所有自项。如果其中一项的值为2,那么这项的占用空间会是其他项的两倍。
.item {
flex-grow: <number>; /* default 0 */
}
设置负数是无效的。
flex-shrink
这定义了弹性项在需要的时候具有伸展的能力。
.item {
flex-shrink: <number>; /* default 1 */
}
负数是无效的。
flex-basis
这定义了,当一个元素在被分配到剩余空间之前的默认大小。它可以是一个长度(如:20%,5rem等)或者一个关键字。auto
关键字的意思就是『按照我的宽度和高度属性调整尺寸』(他会暂时根据main-size
来布局大小直到被弃用)。如果使用关键字content
,意思就是『基于内容调整大小』——不过这个关键字并一定能很好的工作,因此很难去测试或者知晓它的兄弟们max-content
,min-content
和fit-content
做了什么。
.item {
flex-basis: <length> | auto; /* default auto */
}
如果设置为0,额外空间内容不会被分解开来。如果设置成auto
,额外空间会基于它的flex-grow
的值进行分布。
flex
这是flex-grow
,flex-shrink
和flex-basis
组合缩写版。第二个和第三个参数(flex-shrink
和flex-basis
)是可选的。默认是0 1 auto
。
推荐你使用的这种缩写属性,这比设置单独属性更好。可以智能的通过缩写形式设置值。
align-self
用来在单独的伸缩项目上覆写默认的对齐方式。
请看下align-items
的解释,帮助你了解可用值。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
注意,float
,clear
和vertical-align
在弹性项中会失效。
例子
让我们从一个非常非常简单的例子开始,解决一个非常日常的问题:完美居中。如果你使用flexBox
布局,这将会变得非常简单。
.parent {
display: flex;
height: 300px; /* Or whatever */
} .child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
这个依赖于设置margin
值为auto
值,会自动获取弹性容器的额外空间。因此设置垂直方向margin
为auto
可以让弹性项完美的居中在两个轴。
现在让我们使用下一些其他属性。
考虑使用一个包含六个项的列表,并且为了视觉审美给他设置了一个固定大小尺寸,但他们也有可能可以自动获取尺寸大小。我们想要他们可以均匀的,并且完美分布在水平轴上,并且当我改变浏览器的大小,他们还是可以很好的展示(不需要引用媒体查询!)。
.flex-container {
/* 我们先创建一个弹性布局环境*/
display: flex; /* 然后如果我们允许子项换行可以定义flow-direction
* 记住这相等于:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap; /* 然后我们再定义怎么样分布剩余的空间 */
justify-content: space-around;
}
完工。其他的一切不过是美化样式。下面提供一些html,css代码,可以在codePen
调试并且改变下浏览器的大小看看会发生什么。
codePen
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
SASS: @import "compass/css3"; .flex-container {
padding: ;
margin: ;
list-style: none; display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; -webkit-flex-flow: row wrap;
justify-content: space-around;
} .flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px; line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
让我们再尝试下其他东西。想象下,我们的网站所有页面头部都有个右对齐布局的导航,但是我们想让他在中等大小的屏幕中居中显示并且在小屏幕设备中单行显示。非常简单。
/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
} /* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
} /* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}
让我们再来试试一些更加灵活性的弹性项!关于移动先行,3列布局与页眉页脚全屏。和独立的文档顺序。
.wrapper {
display: flex;
flex-flow: row wrap;
} /* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
flex: %;
} /* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. nav
* 3. main
* 4. aside
* 5. footer
*/ /* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: auto; }
} /* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/
.main { flex: 0px; } .aside- { order: ; }
.main { order: ; }
.aside- { order: ; }
.footer { order: ; }
}
Flexbox前缀
Flexbox
接受一些运营商前缀以支持可以在更多的浏览器上使用。它不仅只包括在属性前添加前缀,它也有完全不同的属性名字和值名字。这是因为Flexbox
规范随着时间一直在变化,因此有了old
,tweener
和new
版本。
当然最好的方式是使用最新的语法,并且通过Autoprefixer运行你的css。
这有一段Sass @mixin
可供选择,他也可以给你提供一些需要怎样处理的想法,帮助你处理一些前缀问题。
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
} @mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
} @mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
} .wrapper {
@include flexbox();
} .item {
@include flex(1 200px);
@include order(2);
}
关于FlexBox的布局的更多相关文章
- CSS3弹性盒模型之Flexbox是布局模块box-sizing & box-orient & box-direction & box-ordinal-group
css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,bord ...
- flexbox 伸缩布局盒
Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计. Flexbox 由 伸缩容器 和 伸缩项目 组成.通过设置元素的 display 属性为 ...
- CSS3中的Flexbox弹性布局(二)
flexbox详解 flexbox的出现是为了解决复杂的web布局,因为这种布局方式很灵活.容器的子元素可以任意方向进行排列.此属性目前处于非正式标准. flex布局模型不同于块和内联模型布局,块和内 ...
- 【RN - 基础】之FlexBox弹性布局
前言 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同的屏幕,为盒装模型提供最大的灵活 ...
- 【转】Flexbox——快速布局神器
原文转自:http://www.w3cplus.com/css3/flexbox-basics.html 简介 在很多方面HTML和CSS是一个强大的内容发布机制——易学.灵活和强大.但复杂的布局是他 ...
- Flexbox——快速布局神器
Flexbox通常能让我们更好的操作他的子元素布局,例如: 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行: 可以快速让他们布局在一列: 可以方便让他们对齐容器的左.右 ...
- 使用flexbox来布局web应用
使用 flexbox 可以帮助你设计出引人注目的布局,并且在pc端或移动端能够很好的缩放.告别使用浮动的 <div> 元素.绝对定位 和一些JavaScript hacks, 使用仅仅几行 ...
- Flexbox弹性布局
Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性.最新版本兼容IE11+.firefox.safari.chrome.opera及移动端,但移动端ios7.1 ...
- Flexbox弹性布局,更优雅的布局
Flexbox,更优雅的布局 Flex 布局教程:语法篇 Flex 布局教程:实例篇 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得 ...
随机推荐
- Numpy库的下载与安装总结
今天在做Plotly的散点图时,需要Numpy 这个库的使用 没有安装Numpy这个库的时候,报错一般是下图这样:ModuleNotFoundError: No module named 'numpy ...
- Linux学习之路(二)
4.Linux文件查找工具. Linux经常使用locate与find作为文件查找命令.find可以认为是系统自带的命令,功能也挺多但是使用方法相对有点繁琐.find查找的是实时文件数据,一般用于查询 ...
- 在Visual Studio 2017上配置并使用OpenGL
在Visual Studio 2017上配置并使用OpenGL 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 首先在Windows下安装Visual ...
- Spark SQL中列转行(UNPIVOT)的两种方法
行列之间的互相转换是ETL中的常见需求,在Spark SQL中,行转列有内建的PIVOT函数可用,没什么特别之处.而列转行要稍微麻烦点.本文整理了2种可行的列转行方法,供参考. 本文链接:https: ...
- HTMLCSS--案例| 超链接美化 | 模态框 | tab栏选项卡
一.超链接美化 二.模态框 三.tab栏选项卡 -------------------------------------------- 一.超链接美化 <!DOCTYPE html> & ...
- 一篇文章搞定mongodb
一 安装 1 安装目录下新建文件夹data,etc,logs #在bin文件下启动cmd,指定数据存储的路径mongod --dbpath D:\MongoDB\data\db 2 etc文件夹中新建 ...
- webApi 验证basic-authentication认证的资源的各种语言的实现
HTTP Basic authentication (BA) 是一个基于http请求的,简单验证.详细资料:https://en.wikipedia.org/wiki/Basic_access_aut ...
- css实现单行(多行)文本溢出显示 ...
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...
- Oracle 查询表对应的索引
select col.table_owner "table_owner", idx.table_name "table_name", col.index_own ...
- redis 初步认识四(redis锁,防并发)
using System; namespace ConsoleAppRedis { class Program { static void Main(string[] args) { //第一种,无登 ...