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

相关推荐
web行路人9 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂31 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石39 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程40 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge2 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫2 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js