带你全面了解flex响应式布局
弹性盒子是一种用于按行或按列布局元素的一维布局方法,元素可以膨胀以填充额外的空间,收缩以适应更小的空间,适用于任何元素上,如果一个元素使用了flex弹性布局(以下都会简称为:flex布局),则会在内部形成BFC,flex布局已经得到了所有浏览器的支持,这意味着,现在就能放心,安全的使用这项技术。
一、前沿
网页布局(layout)是 CSS 的一个重点应用。
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
二、基本概念
基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
主轴与交叉轴
学习flex布局需要明白”主轴“与”交叉轴“的概念,采用flex布局的元素,称为”容器“ ( flex container),它的所有子元素都是容器的”项目“(flex item),容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做 main start ,结束位置叫做 main end ;交叉轴的开始位置叫做 cross start ,结束位置叫做 cross end
使用flex
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
行内元素使用 Flex 布局
.box{
display: inline-flex;
}
Webkit 内核的浏览器,必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
三、容器的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
容器和项目各有6个属性,见下图
flex-direction
flex-direction 属性决定主轴的方向(即项目的排列方向)
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
flx-wrap
flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap(默认值):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
默认情况下,项目都排在一条线上,无论是否给定宽度,都是不会主动换行的:
.main {
display: flex;
width: 500px;
height: 300px;
background: skyblue;
}
.main div {
width: 100px;
height: 100px;
background: pink;
font-size: 20px;
}
默认的nowrap
,即使是7个100px宽度的项目,也不会超出500px的容器
如果需要换行,需要设置flex-wrap
flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap
flex-flow: <flex-direction>|| <flex-wrap>;
举个例子🌰:
justify-content
justify-content 属性定义了项目在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around |space-evenly;
}
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-around:每个项目两侧的间隔相等。
- space-between:两端对齐,项目之间的间隔都相等。
- space-evenly:每个项目的间隔与项目和容器之间的间隔是相等的。
align-items
align-items 属性定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值): 如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content
align-content 属性定义了多根轴线的对齐方式,前提是需要设置flex-wrap: wrap,否则不会有效
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。
- stretch(默认值):轴线占满整个交叉轴。
四、项目的属性
order
order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0,可以是负数。
order: <integer>;
flex-grow
flex容器中剩余空间的多少应该分配给项目,原来增大盒子的,也称为扩展规则。最终的项目的宽度为:自身宽度 + 容器剩余空间分配宽度,flex-grow最大值是1,超过1按照1来扩展,默认为0,即如果存在剩余空间,也不放大,比如,当父盒子的宽度大于子盒子的宽度,父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比
flex-grow: <number>;
/* default 0 */
在这里,第三个item,设置了flex-grow: 1
,会占据剩余的所有空间,
flex-shrink
指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值,默认值是1,即如果空间不足,该项目将缩小
flex-shrink: <number>;
/* default 1 */
默认情况下,第一个div宽度是200,第二个div宽度是300,两个相加应该超过父元素的400,但是由于 flex-shrink 都设置为1,将两个div都收缩在父元素中
.item {
width: 400px;
height: 300px;
background: skyblue;
display: flex;
padding: 5px;
}
.item div {
height: 100px;
font-size: 20px;
}
.item div:nth-child(1) {
flex-shrink: 1;
width: 200px;
background: pink;
}
.item div:nth-child(2) {
flex-shrink: 1;
width: 300px;
background: cadetblue;
}
如果将第一个div设置为 flex-shrink: 0; 不收缩,则按容器实际宽度展示
那收缩后的子项宽度是怎么样计算的呢?
第一个子项宽度4002/5 = 160,第二个子项宽度4003/5 = 240,
flex-basis
定义在分配多余空间之前,项目占据的主轴空间(main size),项目最终的空间是项目占据的主轴空间加上分配的多余空间
浏览器根据此属性计算主轴是否有多余空间,默认值为 auto ,即项目本身的大小
basis和width同时存在basis会把width干掉
flex-basis: 0 | 100% | auto | <length>
宽度是200,但是由于设置了 flex-basis: 300px; ,所以子项最终宽度是大于自身设置的宽度
.main div {
width: 100px;
height: 60px;
background: #c0f0ff;
font-size: 20px;
border: red 1px solid;
flex-basis: 100px;
}
这是宽度是202因为还有两个像素的边框宽度
flex
flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto 。后两个属性可选。
flex: none | [ <'flex-grow'><'flex-shrink'>? || <'flex-basis'>]
align-self
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto ,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch 。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
.main > :nth-child(1) {
align-self: auto;
}
.main > :nth-child(2) {
align-self: flex-start;
}
.main > :nth-child(3) {
align-self: flex-end;
}
.main > :nth-child(4) {
align-self: center;
}
.main > :nth-child(5) {
align-self: baseline;
}
.main > :nth-child(6) {
height: auto;
align-self: stretch;
}
五、关于flex布局在IE浏览器上的坑
虽然 flex布局 已经得到了 IE浏览器 的支持,但是部分属性在 IE浏览器 上会不生效,或者效果与其他浏览器不一致,在Flexbugs中可以看到 flex布局 在 IE浏览器 糟糕表现的详情描述
这里大概总结了几个,解决办法可以看链接
六、布局案例
flex:1案例
在开发中,我们经常遇到flex:1
的情况,作用是让项目能够自动填充剩余空间,实现自适应布局。
例如,我们有一个水平排列的三个项目,它们的内容长度不一样,我们想让它们平均占据一行的空间,就可以给它们都设置flex:1。
flex:1
是以下 CSS 属性的简写:
举个🌰,网上找的栗子,还不错,直接拿过来了,如下布局:
<div class="flex-box">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
<div class="item3">Item3</div>
</div>
<style type="text/css">
.flex-box{
display: flex;
width: 1000px;
text-algin:center;
}
.item1 {
height: 100px;
width: 200px;
flex: 2 1 0%; /*flex-basis为0%,覆盖width,实际占用0*/
background:red;
}
.item2 {
height: 100px;
width: 300px;
flex: 2 1 auto; /*flex-basis为auto,width权限更高,占用300*/
background:green;
}
.item3 {
height: 100px;
flex: 1 1 200px; /*flex-basis为200,占用200*/
background:blue;
}
</style>
1、分配前,子元素占用空间:0 + 300 + 200 = 500 2、父级空间: 1000 3、可分配空间: 1000 - 500 = 500 4、放大系数: 2 + 2 + 1 = 5 5、子元素获取可放大空间: item1: 500 * 2/5 = 200 item2: 500 * 2/5 = 200 item3: 500 * 1/5 = 100 6、实际子元素空间: item1: 0 + 200 = 200 item2: 300 + 200 = 500 item3: 200 + 100 = 300
注意:这里的flex-basis在以上item中,虽然为 0,但是不代表其宽度为 0,真的来说是先计算一遍未按照 grow 和 shrink 分配之前,各个item 占据的宽度,再计算按照 flex 布局分配的item ,两者相加,便是最终的item 宽度
flex 其他属性补充:
除了flex:1
之外,还有:
- flex: none:相当于flex: 0 0 auto,表示项目不会伸缩,保持原始大小。
- flex: auto:相当于flex: 1 1 auto,表示项目会根据自身大小和剩余空间进行伸缩。
- flex: n(n为正整数):相当于flex: n 1 0%,表示项目的放大比例为n,其他值默认。
flex-basis为0的逻辑就是用flex-basis把width干掉,然后再用flex-grow和flex-shrink增大的增大缩小的缩小,达成最终的效果。
flex参数缩写后三个属性分别对应的值:
flex:none; // flex : 0,0,auto;
flex:auto; // flex:1,1,auto;
flex:1; // flex:1,1,0%;
从上面可以看到flex:auto和flex:1的区别只在于flex-basis这个属性,auto表示基准值(也就是设置的width),0%表示0无尺寸
/* 一个值,无单位数字:flex-grow */
flex: 2;
/* 一个值,width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 两个值:flex-grow | flex-basis */
flex: 1 30px;
/* 两个值:flex-grow | flex-shrink */
flex: 2 2;
/* 三个值:flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;
/**
initial
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器,但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。
auto
元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收 flex 容器中额外的自由空间,也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".
none
元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
*/
等高布局
每一列的内容不一样,但容器的高度时等高的flex: none、flex: auto
,他们都是flex: flex-grow flex-shrink flex-basis
的缩写
.item {
width: 400px;
height: 300px;
background: skyblue;
display: flex;
justify-content: space-between;
padding: 5px;
}
.item div {
width: 100px;
font-size: 20px;
background: pink;
}
.item div p {
text-align: center;
}
左侧宽度固定,右侧自适应布局
常见的TOB系统布局方式,左侧是菜单树,右侧是内容
html, body {
margin: 0;
padding: 0;
}
.container {
display: flex;
width: 100%;
height: 100vh;
background: skyblue;
}
.left-tree {
width: 200px;
height: 100%;
background: pink;
}
.main {
flex: 1 1 auto;
}
粘性页脚
无论中间的内容有多少,页脚始终在底部展示
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
</div>
<div class="footer">Footer</div>
</div>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
background-color: #b73333;
height: 50px;
}
.content {
display: flex;
flex: 1;
}
.sidebar {
background-color: #3d9d4d;
width: 25%;
}
.main {
background-color: #0825dc;
flex: 1;
}
.footer {
background-color: #ffe52f;
height: 50px;
}
七、总结
flex布局 是目前最流行的布局方式之一,优点是浏览器兼容性较好,学习成本较低,上手简单,可以快速通过 flex布局 实现布局效果。缺点是相较于 grid网格布局 来说, flex布局 是 一维布局 ,一般用于单行或者单列的布局,如果要实现多行多列的布局,推荐使用 gird网格布局 。
理解轴的概念对学习flex布局来说至关重要,掌握 flex布局 会对我们编写布局时,事半功倍!本文整体介绍了轴、容器、项目的概念,再结合了几个具体的布局案例来讲解flex布局,希望能对读者有所帮助,谢谢!
八、参考
转载自:https://juejin.cn/post/7257872746499555383