弹性布局详解

弹性布局是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就是主轴,弹性容器可控制主轴和交叉轴的对齐方式,以及收缩比,排列布局方式,其应用场景最多就是作居中和三栏布局

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

相关推荐
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome