CSS:弹性盒子模型详解(用法 + 例子 + 效果)

目录

弹性盒子模型

flex-direction 排列方式 主轴方向

flex-direction: row; 横向布局,默认从左向右。

flex-direction: row-reverse; 横向布局,从右向左。

flex-direction: column; 纵向布局,从上到下。

flex-direction: column-reverse; 纵向布局,从下到上。

css 复制代码
.top{
    width:800px;
    background: yellow;
    display:flex;
    flex-direction: row-reverse;  
}

换行

flex-wrap: wrap; 换行

flex-wrap: nowrap; 不换行

排序

给子级加上 order: 编号

值越小越考前,值越大越向后排。

css 复制代码
.top{
    width:800px;
    background: yellow;
    display:flex;
    flex-direction: row;  
}

.bottom{
    width:800px;
    height:200px;
    background:pink;
}

.left{
    width:200px;
    height:100px;
    background:orange;
    float:left;
    order:1;
}
.middle{
    width:200px;
    height:100px;
    background:blue;
    float:left;
    order:3;
}
.right{
    width:200px;
    height:100px;
    background: purple;
    float:left;
    order:2;
}

控制子元素缩放比例

作用于子级元素。

flex-shrink: 压缩因子。

flex-grow: 拉伸因子。

flex-grow: 基准因子,一般用宽度代替。

css 复制代码
.top{
    width:800px;
    background: yellow;
    display:flex;
    flex-direction: row;  
}

.bottom{
    width:800px;
    height:200px;
    background:pink;
}

.left{
    width:200px;
    height:100px;
    background:orange;
    flex-grow: 8;
}
.middle{
    width:200px;
    height:100px;
    background:blue;
    flex-grow:5;
}
.right{
    width:200px;
    height:100px;
    background: purple;
    flex-grow:1;
}

三个比例的拉伸效果:


缩放是如何实现的?

拉伸:把所有flex-gorw求和,在把未占满的位置分为总和个份数,根据每个子集的比例分给子集。

缩小:根据子集宽度按比例比例自动缩小。

控制子元素的对其方式

justify-content 横向 对齐方式

其实是和主轴方向 有关系,不一定是横向的,这里用横向举例展示。

justify-content: flex-start; 默认左对其

justify-content: flex-end; 右

justify-content: center; 中间

justify-content: space-between; 空白放中间

justify-content: space-around; 空白放周围

justify-content: space-evenly; 空白均匀分布

align-items 纵向 对齐方式

align-items: flex-start; 默认顶端对齐

align-items: flex-end; 底端对齐

align-items: center; 居中对齐

align-items: baseline; 首行底端对齐

align-content 多行 对齐方式

align-content: flex-start; 所有行都在顶端

我们先给给父级加上高度,好用来展示效果。

align-content: flex-end; 底部

align-content: center; 中间

align-content: space-betwween; 空白放中间

align-content: space-around; 空白放周围

align-content: space-evenly; 空白均匀分布

相关推荐
布列瑟农的星空几秒前
webworker 实践:外部依赖引入和打包问题
前端·低代码
傻小胖3 分钟前
发布一个npm包,更新包,删除包
前端·npm·node.js
runnerdancer7 分钟前
解构shopify,从0到1实现落地页低代码编辑器
前端
WEI_Gaot26 分钟前
react19 的项目创建和组件使用
前端·react.js
资深前端外卖员30 分钟前
【nodejs高可用】前端APM应用监控方案 + 落地
前端·后端
OhBonsai30 分钟前
Shader 图像处理1_ToneMap技术处理过曝
前端
突头小恐龙30 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子30 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
土豆125032 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
花生了什么树lll32 分钟前
面试中被问到过的前端八股(四)
前端·面试