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>
相关推荐
wyzqhhhh2 小时前
less和sass
前端·less·sass
Nan_Shu_6143 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel4 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始5 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible5 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫5 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评5 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner5 小时前
【html】canvas实现一个时钟
前端·html
阿昭L5 小时前
html快速学习
html
qianmo20215 小时前
基于any2web+deepseek实现对三角函数定义的理解
css·html·css3