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>
相关推荐
吃饺子不吃馅18 分钟前
Canvas实现协同电影选座
前端·架构·canvas
前端慢慢其修远1 小时前
fabric.js 中originX originY center设置问题
前端·fabric
im_AMBER1 小时前
React 04
前端·react.js·前端框架·1024程序员节
fhsWar2 小时前
Vue3 props: `required: true` 与 vant 的`makeRequiredProp`
前端·javascript·vue.js
泷羽Sec-静安2 小时前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端3 小时前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal4963 小时前
Web Components简介及如何使用
前端·javascript·html
jump6803 小时前
TS中 unknown 和 any 的区别
前端
无羡仙3 小时前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊4 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器