flex语法
一、Flex布局是什么
注:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效
- Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
- 任何一个容器都可以指定为 Flex 布局。如:
.box{
display: flex;
}
- 行内元素也可以使用 Flex 布局。如:
.box{
display: inline-flex;
}
- 兼容性:ie9及以下版本不支持flexbox。
- 自动加前缀:由于每个厂商都有自己的前缀,很麻烦,所以需要用一个工具autoprefixer
1、一些应用
- (1)由于flx的flex-flow默认值是row和nowrap,所以直接在父元素上面设置display: flex;就可以让子元素全都横向排列,不过子元素间是没有间距的.
#warning {
display: flex;
}
<div id="warning">
<div class="demo1">1</div>
<div class="demo2">2</div>
</div>
- (2)设置单个元素和高度一样的多个元素水平分散垂直居中:如果直接设置
display:flex;justify-content:space-between;align-items:center;
当元素有几个而且元素的高度不一样的时候,这个方法只能实现所有子元素的中点在同一水平线上,不能实现所有的子元素的上边框在同一水平线上。
.box {
display:flex;
justify-content:space-between;
align-items:center;
}
- (3)实现多个元素上边框在一个水平线上且水平分散:要实现这个只需要再包一层flex,即有3层元素,第一层元素是最外面的box,实现里面的直接子元素(只有一个)垂直居中;第二层元素是中间的box,实现里面的元素水平分散且上端对齐。
#box {
display: flex;
align-items: center;
}
.inner-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
<div id="box">
<div class="inner-box">
<div class="demo1">1</div>
<div class="demo2">2</div>
<div class="demo3">3</div>
</div>
</div>
二、基本概念
- 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
- 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end.
- 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
三、容器的属性
以下6个属性设置在容器上
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1、flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向)。
关于垂直方向设置space-between和space-around:首先水平方向是可以直接用justify-content设置的;而在垂直方向,align-items只能设置一条轴的,需要用align-content(专为多条线设计)来设置这个效果
有4个值
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
2、flex-wrap属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
有3个值
nowrap(默认):不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
3、flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
4、justify-content属性
justify-content属性定义了项目在主轴上如何分配富裕空间(富裕空间可以理解为空闲空间)。
5个值
flex-start(默认值):所有元素在左边(元素之间没有间距),富裕空间在右边
flex-end:所有元素在右边(元素之间没有间距),富裕空间在左边
center: 所有元素在中间(元素之间没有间距),富裕空间平均分在左右
space-between:第一个和最后一个项目靠边框,其他项目平均分配富裕空间。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
5、align-items属性
align-items属性定义项目在交叉轴上如何分配富裕空间
5个值
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
6、align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
6个值
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
四、项目的属性
以下6个属性设置在项目上
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1、order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。可以设置为负。
2、flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
注:如果设置了这个属性,则元素会根据这个属性来计算宽高,而使原来设置的宽高失效。宽高的计算公式为:子元素的尺寸=盒子的尺寸*
子元素的box-flex属性值/所有子元素的box-flex属性值的和。所以,经常就直接把所有子元素的这个值都设置为1,即所有元素宽高相等。
3、flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
注:如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
4、flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
注:它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
5、flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto).
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
6、align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。它的值和align-items的值一样,不过多了一个auto。
flex布局:实例
一、骰子的布局
HTML代码
<div class="box">
<span class="item"></span>
</div>
1、单项目
/* 水平垂直居中对齐 */
.box {
display: flex;
justify-content: center;
align-items: center;
}
2、三项目
.box {
display: flex;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
二、圣杯布局
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
flex: 1;
}
.HolyGrail-body { /* 这个为包围nav,content-ads的div */
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}
三、固定的底栏
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。
HTML
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}