关于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: 0;margin: 0;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;} }
codePen调试链接
让我们再来试试一些更加灵活性的弹性项!关于移动先行,3列布局与页眉页脚全屏。和独立的文档顺序。
.wrapper {display: flex;flex-flow: row wrap; }/* We tell all items to be 100% width */ .header, .main, .nav, .aside, .footer {flex: 1 100%; }/* 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: 1 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: 2 0px; }.aside-1 { order: 1; }.main { order: 2; }.aside-2 { order: 3; }.footer { order: 4; } }
codePen
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); }
转载于:https://www.cnblogs.com/z-y-zone/p/9517417.html
关于FlexBox的布局相关推荐
- 网页HTML5制作flex布局骰子,CSS3的Flexbox骰子布局的实现及分析
这篇文章主要介绍了关于CSS3的Flexbox骰子布局的实现及分析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 骰子布局顾名思义,就是好比骰子的一面最多可以放置9个点,而每个面放置的 ...
- Weex Flexbox弹性布局使用
一.flexbox的关键字 1.在父视图上使用的关键字及对应的内容: display: -webkit-box | -ms-flexbox | flex flex-direction: row | c ...
- flexbox 伸缩布局
flexbox 研究 研究flexbox需要清楚一个概念,主轴和交叉轴的概念,而这两个轴是可以交换的 flexbox的样式属性主要作用于两个部分,一个是伸缩容器,一个是伸缩子项目 容器样式 displ ...
- 弹性盒子(flexbox)布局属性详解
弹性盒子布局属性详解 1 弹性盒子概述 2 基本概念 3 常用属性 3.1 布局方向flex-direction 3.2 环绕效果flex-wrap 3.3 水平对齐方式justify-content ...
- CSS3 Flexbox 弹性布局
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局.2009年,W3C提出了一种新的方案----Fle ...
- React-Native中的flexbox布局的使用
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/72672404 本文出自:[顾林海的博客] 前言 在编写React Na ...
- CSS3 Flexbox布局那些事
相信研究过CSS3的同学对Flexbox布局一定不会陌生(作为一个未来主流的布局方式,至少有所耳闻).最近完成了两个项目:一个是移动端H5项目,一个是嵌入HTML页面的mac客户端项目.为了庆祝这两个 ...
- html5 box布局,使用Flexbox打造响应式网页网格布局
CSS3的Flexbox可以非常容易的制作出各种布局效果.前面我们已经结束了flexbox的基本使用方法,水平布局和垂直布局方法.这篇文章我们来看看如果制作具有响应式效果的flexbox双列网格布局效 ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
最新文章
- SPRING3.X JSON 406 和 中文乱码问题
- obs 直播 多路推流插件 简介
- Lambda方法推导(method references)
- luogu P3796【模板】AC自动机(加强版)
- 机器学习笔记:线性回归
- 【Linux】一步一步学Linux——apt-get命令(278)
- 通过PowerShell获取Windows系统密码Hash
- 在下列计算机应用项目中,属于过程控制应用领域的是,计算机基础试题.ppt
- magento左栏添加筛选Filtering options on Left-Navigation Menu in Products List Page
- bash:附近有语法错误_Bash备忘单:按键组合和特殊语法
- matlab vs2010编译器xml,matlab(R2010a)找不到vs2010的c++编译器
- ASP.net2.0调试JavaScript脚本
- 错误上报_PCIe错误的上报方式
- docker装LibreELEC_只需一步 树莓派刷入LibreELEC系统变身电视机顶盒
- sop流程图模板_标准作业流程SOP详解,附流程图绘制规范,不愁不会画!
- Android native crash debug
- 摄影场景拍摄方法笔记
- Saver类--变量的保存和恢复
- python xlsxwriter生成图片保存_Python Excel操作模块XlsxWriter之插入图片worksheet.insert_image()...
- Shiny应用基础(5):数据获取与响应
热门文章
- MyBatisPlus的ActiveRecord实现CRUD
- 学习linux基础操作,从0开始入门!
- Java 网络 socket 编程
- 博客构建工具推荐(文本送书)
- flutter的安装与设置
- 信息系统项目管理师范围管理
- 一文带你了解MySQL基础
- c语言十六进制的输出与站位,运算符与格式输出输入4
- .net session 有效时间_Python中requests模拟登录的三种方式(携带cookie/session进行请求网站)...
- 独家专访 | 红布林(Plum​)庞博:万亿元二手时尚交易蓝海的生存法则