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; 空白均匀分布

相关推荐
小高0072 分钟前
🎯GC 不是 “自动的” 吗?为什么还会内存泄漏?深度拆解 V8 回收机制
前端·javascript·面试
RoyLin6 分钟前
V8引擎与VM模块
前端·后端·node.js
Keepreal4969 分钟前
React受控组件和非受控组件的区别,用法以及常见使用场景
前端·react.js
ITsheng_ge15 分钟前
GitHub Pages 部署静态网站流程、常见问题以及解决方案
前端·github·持续部署
web3d52015 分钟前
CSS水平垂直居中终极指南:从入门到精通
前端·css
1024小神21 分钟前
前端css常用的animation动画效果及其简写
前端
小白菜学前端25 分钟前
Vue 配置代理
前端·javascript·vue.js
m0_zj33 分钟前
63.[前端开发-Vue3]Day05-非父子通信-声明周期-refs-混合-额外补充
前端·javascript·vue.js
golang学习记1 小时前
Cursor1.7发布,AI编程的含金量还在上升!
前端
北辰alk1 小时前
Next.js 为何抛弃 Vite?自造轮子 Turbopack 的深度技术解析
前端