关于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布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得 ...
随机推荐
- MAC MAMP 中安装配置使用 ThinkPHP
MAMP PRO 是Mac OS X 平台上经典的本地环境应用 MAMP 的专业版.专门为专业的Web开发人员和程序员轻松地安装和管理自己的开发环境. MAMP这几个首字母代表Mac OS X系统上的 ...
- DVWA 黑客攻防演练(七)Weak Session IDs
用户访问服务器的时候,一般服务器都会分配一个身份证 session id 给用户,用于标识.用户拿到 session id 后就会保存到 cookies 上,之后只要拿着 cookies 再访问服务器 ...
- linux内核调试技巧之一 dump_stack【转】
在内核中代码调用过程难以跟踪,上下文关系复杂,确实让人头痛 调用dump_stack()就会打印当前cpu的堆栈的调用函数了. 如此,一目了然的就能看到当前上下文环境,调用关系了 假设: 遇到uvc_ ...
- spring boot 中使用 jpa以及jpa介绍
1.什么是jpa呢?JPA顾名思义就是Java Persistence API的意思,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中.12.jpa具有什么 ...
- Bootstrap -- 初见 Bootstrap
Bootstrap -- 初见 Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. ...
- Golang 入门系列(四)如何理解interface接口
前面讲了很多Go 语言的基础知识,包括go环境的安装,go语言的语法等,感兴趣的朋友,可以先看看之前的文章.https://www.cnblogs.com/zhangweizhong/category ...
- OpenMP并行程序设计——for循环并行化详解
在C/C++中使用OpenMP优化代码方便又简单,代码中需要并行处理的往往是一些比较耗时的for循环,所以重点介绍一下OpenMP中for循环的应用.个人感觉只要掌握了文中讲的这些就足够了,如果想要学 ...
- python使用http、https代理
在国内利用Python从Internet上爬取数据时,有些网站或API接口被限速或屏蔽,这时使用代理可以加速爬取过程,减少请求失败,Python程序使用代理的方法主要有以下几种: (1)如果是在代码中 ...
- 【原创】JAVA面试解析(有赞一面)
本文的题目出自博客 http://www.54tianzhisheng.cn/2018/07/12/youzan/ 但是作者没有给出答案,博主斗胆来制作答案版. 引言 说在前面的话: 本文适合人群:急 ...
- openstack搭建之-基础服务配置(7)
基础环境准备,所需服务器及说明 172.16.2.51 base.test.com 基础服务节点 172.16.2.52 ctrl.test.com 控制节点 172.16.2.53 ...