1 简介
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定位flex布局,无论是块级元素还是行内元素
.box1{
display: flex;
display:-webkit-flex
}
.box2{
display: inline-flex;
display:-webkit-inline-flex
}
Webkit内核的浏览器,必须加上-webkit
前缀。
注意,设为Flex布局以后,子元素的float
、clear
和vertical-align
属性将失效。
2 flex和inline-flex
display: flex
的元素是块级元素,display: inline-flex
的元素是内联元素
3 浏览器支持情况
IE10以下不支持。
4 容器属性
以下6个属性设置在容器上
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
4.1 flex-direction
flex-direction
属性决定主轴的方向(即项目的排列方向),可以取以下四个值:
row
(默认值):主轴为水平方向,起点在左端row-reverse
:主轴为水平方向,起点在右端column
:主轴为垂直方向,起点在上沿column-reverse
:主轴为垂直方向,起点在下沿
4.2 flex-wrap
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。可以取以下三个值
nowrap
(默认):不换行wrap
:换行,第一行在上方wrap-reverse
:第一行在下方
4.3 flex-flow
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4.4 justify-content
justify-content
属性定义了项目在主轴上的对齐方式(也就是水平对齐方式),可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
4.5 align-items
align-items
属性定义项目在交叉轴上如何对齐(也就是垂直对齐方式),取值有:
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto
,将占满整个容器的高度。
注意默认值是stretch
,所以如果未指定项目高度,项目高度将充满整个容器。
4.6 align-content
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。取值有:
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。
注意在多根轴线的情况下,如果同时定义了align-items
和align-content
,前者不起作用,并且后者的center
与前者的center
效果不同,align-items
的center
与align-content
的space-between
效果相同。
5 项目属性
以下6个属性设置在项目上
order
flex-grow
flex-shrink
flex-basis
flex
align-self
5.1 order
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
。
注意:由于默认值是0
,所以没有被设置的项目是排在最前面的。
5.2 flex-grow
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
如果所有项目的flex-grow
属性都为1
,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2
,其他项目都为1
,则前者占据的剩余空间将比其他项多一倍。
注意是占据剩余空间比其他多一倍,不是本身尺寸是其他项目的两倍。
5.3 flex-shrink
flex-shrink
属性定义了项目的缩小比例,默认为1
,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink
属性都为1
,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0
,其他项目都为1
,则空间不足时,前者不缩小。
如果容器中定义了flex-wrap
为wrap
则这个属性也无效。
5.4 flex-basis
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
这个属性会覆盖项目本身width
的属性。
5.5 flex
==flex
属性是flex-grow
, flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。==
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
5.6 align-self
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
但是注意对于多根主轴时设置了align-content
的情况,align-self
是不起作用的。
6 布局例子
一般情况会利用flex默认的align-items
属性为stretch
属性,再加上flex-grow
,将宽度或者高度(设置flex-direction
为column
)占满(不设定宽度和高度)。
6.1 圣杯布局
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
将页面高度占满就利用了flex-direction
为column
和align-items
属性为stretch
,关键点在媒体查询,将横着排列的三列垂直叠加:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-flow: column;
width: 100%;
height: 100%;
}
header {
height: 10%;
background: sandybrown;
}
main {
flex: 1;
background: lavenderblush;
display: flex;
}
footer {
height: 10%;
background: olivedrab;
}
.left {
flex: 1;
background: silver;
}
.right {
flex: 1;
background: khaki;
}
section {
flex: 8;
background: palegreen;
}
@media only screen and (max-width: 376px) {
main {
flex-flow: column;
}
}
</style>
</head>
<body>
<div class="container">
<header></header>
<main>
<aside class="left"></aside>
<section></section>
<aside class="right"></aside>
</main>
<footer></footer>
</div>
</body>
</html>
6.2 输入框的布局
也是利用了flex默认的align-items
属性为stretch
属性,不设置外围的高度,通过设置文字的padding
撑起高度,然后input
自动填满这个高度。
HTML:
<div class="InputAddOn">
<span class="InputAddOn-item">...</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">...</button>
</div>
CSS:
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
6.3 固定的底栏
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,利用了flex-direction
为column
,让底栏总是出现在页面的底部。
注意,这个时候中间的部分如果内容过多有两种处理方法:
1. 中间部分滚动
2. 外围整体使用min-height
,让内容少的时候底栏在页面底部,多的时候底栏随内容移动到屏幕外
6.4 一个上中下三层的布局
上中下三层,头部尾部固定宽度,中间宽度自适应并出现滚动条
<!DOCTYPE html>
<html lang="en" style="min-height : 100%">
<head lang="zh-CN">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin :0;
}
html,body{
height:100%;
}
.wrap{
height:100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
header{
height:50px;
background: red;
}
.main{
flex:1;
background: chartreuse;
overflow-y: scroll;
}
footer{
height:50px;
background: violet;
}
p{
height:11150px;
background: chocolate;
}
</style>
</head>
<body>
<div class="wrap">
<header></header>
<div class="main">
<P>123</P>
</div>
<footer></footer>
</div>
</body>
</html>