布局模式
字数: 0 字 时长: 0 分钟
简介
传统方案是基于盒装模型，依赖display属性+position属性+float属性，但对于一些特殊布局实现起来比较繁琐并且有些许副作用。所以 css3 引入了新的布局模式，弹性盒子布局（felx）和网格布局（grid），使得布局更加灵活和高效。
弹性盒子布局（felx）
felx-弹性布局可以看看阮一峰 flex布局教程的文章，将的那叫一个详细，这里就不赘述了。 我在这里就简单说一下 felx 布局的基础用法：
felx 基础用法
display: flex;：将元素设置为弹性盒子flex-direction: row | row-reverse | column | column-reverse;：设置主轴方向justify-content: flex-start | flex-end | center | space-between | space-around;：设置主轴对齐方式align-items: stretch | flex-start | flex-end | center | baseline;：设置交叉轴对齐方式flex-wrap: nowrap | wrap | wrap-reverse;：设置是否换行align-content: stretch | flex-start | flex-end | center | space-between | space-around;：设置多行对齐方式flex: 0 1 auto;：简写属性，相当于flex-grow: 0; flex-shrink: 1; flex-basis: auto;flex-grow: 0 | 1;：设置弹性盒子增长比例flex-shrink: 0 | 1;：设置弹性盒子收缩比例flex-basis: auto | 0px;：设置弹性盒子初始大小gap: 10px：设置元素间距
felx 水平垂直居中
css
.container {
display: flex;
align-items: center;
justify-content: center;
}- 只需三行 css 代码即可实现，是不是很方便呢？
1
2
3
网格布局（grid）
阮一峰 grid布局教程的grid文章我也贴在这里了，方便大家查看。
grid 基础用法
display: grid;：将元素设置为网格布局grid-template-columns: repeat(3, 1fr);：设置列数和列宽grid-template-rows: repeat(3, 1fr);：设置行数和行高grid-gap: 10px;：设置网格间距grid-column: 1 / 3;：设置网格列位置grid-row: 1 / 3;：设置网格行位置grid-area: 1 / 1 / 3 / 3;：设置网格区域位置
grid 水平垂直居中
css
.container {
display: grid;
grid-template-columns: repeat(3, auto);
}- grid 甚至只需两行 css 代码即可实现！
1
2
3
最后更新于: 2024/11/7 17:06:08