Flex布局——详解

1.定义

flex布局也叫弹性布局，比float浮动布局更加灵活，不会造成脱标，若要对某个标签操作，则对其的父级标签加flex；Flex布局就是将一个盒子的字盒子变为弹性盒子，然后通过主轴和交叉轴对其进行排列；在flex布局中，替换元素(display:block.....)若有固定宽高，则flex容器不会对齐进行压缩。

1.1 代码示例

<style>/*只用在父级的css属性加flex，盒子变成弹性容器，子级标签（弹性盒子）会沿着主轴方向自动缩放，水平方向为主轴，垂直方向为侧轴*/.box {...display:flex; }
</style>
<div class="box"><div></div><div></div>
</div>

2.布局属性

2.1 代码示例

<style>.box {display:flex;/*主轴的起点在左边，侧轴的起点在上面*/justify-content:center;/*弹性盒子沿主轴居中排列*/justify-content:space-between;/*沿主轴均匀排列，空白部分间距（父级剩余的尺寸）只均分在弹性盒子之间*/justify-content:space-around;/*沿主轴均匀排列，空白部分均分在弹性盒子两侧，盒子间的间距是两端间距的两倍*/justify-content:space-evenly;/*沿主轴均匀排列， 各个间距都相等*//*主轴上的排列方式侧轴也可以用，作用对象为多个flex项目*/align-content:space-between;/*沿侧轴均匀排列，空白部分间距（父级剩余的尺寸）只均分在弹性盒子之间*//*作用对象为单个flex项目*/align-items:strerch;/*弹性盒子沿侧轴拉伸至铺满容器（前提是弹性盒子没有设置高度）*/align-items:center;/*沿侧轴居中排列，只影响侧轴排列，不影响主轴排列，需要有高度才能实现*/flex-direction:column;/*修改主轴方向，使主轴方向改为从上到下*/flex-wrap:wrap;/*让弹性盒子换行并保留原本的宽*/flex:1;/* 是flex-grow/shrink/basis的简写， 等同于 flex：1 1 0，使元素在容器中平均分配多余空间 */flex-grow: 1;/* 可以使盒子动态填充该盒子所在内容区域 ，一般用于字盒子中*/ heigth:300px;border:1px solid black;}.box div:nth-child(n) {align-self:center;/*选中第n个弹性盒子沿侧轴方向居中*/flex:1;/*第n个盒子沿主轴方向拉伸空白部分的1倍，可以控制主轴方向的尺寸*/}.box div {width:200px;height:100px;}
</style>
<div class="box"><div></div><div></div>
</div>