flex弹性布局如何应用-CSDN博客

前言

欢迎大家访问我的博客OECOM，与我一起探讨前端。

正文

网页布局在前端开发中是一个很重要的点，在传统布局解决方案中，一般是基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现，当然也是可以实现的，比如说table布局或者说是使用绝对定位的方式，但是相对于下面要说到的弹性布局来说就复杂多了。

09年的时候，W3C提出了flex布局，相比于现在已经过去将近10年的时间了，使用上应该可以放心，但是如果你面对的是需要解决万恶的IE问题就需要考虑一下了，下面来看一下它目前的兼容情况

flex概念

在说用法之前先说一下具体的概念，flex全称是flexbox（Flexible Box），即弹性盒子，这一模块目的是在提供一个更加有效的的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的，即弹性的。

flex布局的主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至是循序），以最佳的方式来填充keys空间（其主旨是适应所有类型的显示设备）。

那么，什么是容器，什么又是项目。很简单，包围在外面的即容器，内部的即为项目。也就是说采用flex布局的元素就是flex容器（display：flex或inline-flex）,他的所有子元素（注意是子元素，而不包含后代节点）称为flex项目

在Flexbox布局中有水平的主轴（Main Axis）和垂直的侧轴/交叉轴（Cross Axis）两个概念：主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

flex容器属性

flex容器有以下几种属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content

1.flex-direction属性介绍该属性决定主轴的方向（即项目的排列方向）。

属性名	说明
row（默认值）	主轴为水平方向，起点在左端。
row-reverse	主轴为水平方向，起点在右端。
column	主轴为垂直方向，起点在上沿。
column-reverse	主轴为垂直方向，起点在下沿

在这里说一下row-reverse，它的效果并不是简单的右对齐，假设如下代码

<div class="box">
<div class="box-child">1</div>
<div class="box-child">2</div>
<div class="box-child">3</div>
<div class="box-child">4</div>
</div>
复制代码

假设有如上布局，如果设置为

flex-direction:row

，则显示的效果为：1234从左至顺序不再多说，如果是设置为

flex-direction:row-reverse

，则会显示为4321靠右对齐的效果垂直方向同理，以至于后续属性当中只要是涉及到reverse则是会先将其内容倒置，这种方式是为了方便一些国家阅读方式是从右向左的方式，比如中国的古文。

2.flex-wrap属性介绍该属性定义的是，如果一条轴线排不下，如何换行

属性名	说明
nowrap（默认值）	不换行，项目元素会按照自身宽度的百分比进行宽度缩放。
wrap	项目元素宽度不变化，单行遇剩余宽度不够则换行，第一行在上方。
wrap-reverse	项目元素宽度不变化，单行遇剩余宽度不够则换行，第一行在下方。属于倒着的状态

形成这么个效果

3.flex-flow属性介绍 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。将上面两个属性结合在了一起，不在赘述。

4.justify-content属性该属性定义了项目在主轴也就是水平轴上的对齐方式。

属性名	说明
flex-start（默认值）	左对齐
center	居中对齐。
flex-end	右对齐
space-between	两端对齐，项目之间的间隔都相等。
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

下面两个属性的区别在于space-between首末两个元素的左侧和右侧是没有间距，而space-around两侧是有间距的，如下图所示为space-around的效果

5.align-items属性该属性定义项目在交叉轴上如何对齐

属性名	说明
flex-start	交叉轴的起点对齐，即居顶对齐
center	交叉轴居中对齐。
flex-end	交叉轴居底对齐
baseline	项目的第一行文字的基线对齐。假设N个项目的字体大小不同，那么字体所占用的空间也不一样，该属性会令N个项目的第一行文字顶部对齐
stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度。

该属性的前三个值有点类似于vertical-align效果，居顶居中居底对齐。不再多说，来看一下baseline的具体效果：看效果我们可以看出项目1的上边框和项目2的文字顶部也就是“2”的最顶部是对齐的

6.align-content属性介绍该属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线，该属性不起作用。

属性名	说明
flex-start	交叉轴的起点对齐，即居顶对齐
center	交叉轴居中对齐。
flex-end	交叉轴居底对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）	轴线占满整个交叉轴。

具体效果如下图

flex项目属性

项目上的属性包含6个：order、flex-grow、flex-shrink、flex-basis、flex、align-self

1.order属性属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

<div class="box" style="display:flex">
<div class="box-child" style="order:1">1</div>
<div class="box-child" style="order:3">2</div>
<div class="box-child" style="order:2">3</div>
<div class="box-child" style="order:0">4</div>
</div>
复制代码

如上方式，显示的顺序将变为4132

2.flex-grow属性该属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。如果一个项目的flex-grow属性为1，其他项目都为0的话，那么这个项目将会把剩余空间全部占满（可用于左右两端布局，左侧固定宽度，右侧自适应）

3.flex-shrink属性该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。注意：负值对该属性无效

4.flex-basis属性该属性定义了在分配多余空间之前，项目占据的主轴上的大小。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，该属性会替换掉width属性，也就是说有了这个属性以后width属性将会失效。当主轴上没有多余的空间之后，这个值再大也不会使该项目的宽度变大。效果有点类似于max-width，即使width设置的再大也不会超过max-width的值

5.flex属性该属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。不在赘述

6.align-self属性该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

<style>
	.box{
	    background-color: white;
		margin: 0 0 55px;
		display: flex;
		height:400px;
	}
	.box-child{
	width: 200px;
    height: 200px;
    line-height: 200px;
    vertical-align: middle;
    margin: 5px;
    background-color: #ffd200;
    font-size: 100px;
    color: white;
    text-align: center;
	align-self:flex-start;
	}
</style>
<div class="box">
<div class="box-child">1</div>
<div class="box-child" style="align-self:center">2</div>
<div class="box-child" style="align-self:flex-end">3</div>
<div class="box-child">4</div>
</div>
复制代码

以上各属性我们可以通过两张图来看具体的效果