弹性布局详解

弹性布局是css的一种布局方式,可以完整响应式的实现页面的布局,这里的响应式指的是可随页面变大变小,弹性容器中默认存在两条轴,主轴和交叉轴,主轴默认为x轴

可以用flex-direction: column来修改主轴为y轴

依旧是拿ul和三个li为例

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
            width: 200px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li class="item1">1</li>
        <li class="item2">2</li>
        <li class="item3">3</li>
    </ul>
</body>
</html>

默认效果如下

现在给ul加上一个display: flex,那么ul里面的东西都会脱离文档流,这个时候想要其继续实现下面的效果,需要给ul单独加上个100vh的高度

css 复制代码
ul {
    height: 100vh;
}

过一遍所有的属性

css 复制代码
ul {
    display: flex;
}

三个li会横向排布,默认从左往右

css 复制代码
ul {
    display: flex;
    flex-direction: row-reverse;
}

主轴翻转,从右往左排布

css 复制代码
ul {
    display: flex;
    flex-direction: column-reverse;
}

交叉轴翻转,从下往上排

css 复制代码
ul {
    display: flex;
    flex-wrap: wrap;
}

超出则换行

css 复制代码
ul {
    display: flex;
    flex-flow: row nowrap;
}

flex-flowflex-directionflex-wrap的合体。主轴是x轴且不换行,还是默认效果

css 复制代码
ul {
    display: flex;
    justify-content: center;
}

主轴居中

css 复制代码
ul {
    display: flex;
    justify-content: flex-start;
}

居主轴方向起始位置,默认就是居左

css 复制代码
ul {
    display: flex;
    justify-content: flex-end;
}

居主轴方向终点位置,默认就是居右

css 复制代码
ul {
    display: flex;
    justify-content: space-around;
}

给每个子容器都添加相同的间隙

css 复制代码
ul {
    display: flex;
    justify-content: space-between;
}

第一个子元素最左,第二个元素最右,其余子元素均匀分布

css 复制代码
ul {
    display: flex;
    align-items: center;
}

交叉轴居中

css 复制代码
ul {
    display: flex;
    align-items: flex-start;
}

居交叉轴方向起点位置,默认就是居上,就是默认效果

css 复制代码
ul {
    display: flex;
    align-items: flex-end;
}

居交叉轴方向终点位置,默认就是居下

css 复制代码
ul {
    display: flex;
    align-items: baseline;
}

对准文字基线,就是默认效果

css 复制代码
ul {
    display: flex;
    align-items: stretch;
}

交叉轴默认对齐方式,默认效果

css 复制代码
ul {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

超出换行时,居上对齐,center为居中,flex-end为居下

css 复制代码
ul {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

超出换行时,居交叉轴分布均匀,space-around即填充空格

css 复制代码
ul {
    display: flex;
}
.item2 {
    order: -1;
}

order控制子元素的排列顺序,默认值为0,顺序是从小到大,也就是越小越靠前

css 复制代码
ul {
    display: flex;
}
.item2 {
    flex-shrink: 0;
}

控制item2就是不缩小,flex-shrink默认值为1

css 复制代码
ul {
    display: flex;
}
ul li {
    flex-grow: 1;
}

flex-grow的默认值为0,就是超出默认大小时不放大,若为1,超出时也放大,占满整个宽度

css 复制代码
ul {
    display: flex;
}
ul li {
    flex-basis: 250px;
}

权重比宽高高,这个是初始尺寸的宽

css 复制代码
ul {
    display: flex;
}
ul li {
    flex: 1;
}

1比1的比例继承父容器的宽度,因此三个li占满屏幕

css 复制代码
ul {
    display: flex;
}
ul li {
    flex: 1 1 300px
}

三个参数分别对应flex-grow flex-shrink flex-basis,因此就是会放大,会缩小,基础宽度为300,0 0 300 就是既不放大也不缩小

最后

弹性布局的属性看着多,其实也还好,align就是纵向轴,justify就是主轴,弹性容器可控制主轴和交叉轴的对齐方式,以及收缩比,排列布局方式,其应用场景最多就是作居中和三栏布局

另外有不懂之处欢迎在评论区留言,如果觉得文章对你学习有所帮助,还请"点赞+评论+收藏"一键三连,感谢支持!

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
阑梦清川2 小时前
在鱼皮的模拟面试里面学习有感
学习·面试·职场和发展
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍