Flex布局——详解

1.定义

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

1.1 代码示例

html 复制代码

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

2.布局属性

2.1 代码示例

html 复制代码

<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>