网站首页 > 技术文章 正文
进入我的主页,查看更多CSS的分享!
首先呢,先去看文档,了解flex是什么,这里不做赘述。
当然,可以看下面的代码示例,辅助你理解。
一、row
将子元素在水平方向进行布局:
1. 垂直方向靠顶部,水平方向靠左侧
.row-ll {
display: flex;/* 定义flex */
flex-direction: row;/* 默认值*/
align-items: flex-start;/* 默认值*/
justify-content: flex-start;/* 默认值*/
}
示例:
<div class="row-ll" style="width: 660px; height: 230px; border: 1px solid red;">
<div style="width: 110px; height: 110px;">我是div</div>
<img src="" alt="" style="width: 110px; height: 110px;" />
<span>text</span>
</div>
2. 垂直方向靠顶部,水平方向居中
.row-lc {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
}
3.垂直方向靠顶部,水平方向两端对齐
.row-lsb {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
4. 垂直方向靠顶部,水平方向平均分隔(中间间隔的宽度为两边间隔宽度的2倍)
.row-lsa {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-around;
}
5. 垂直方向靠顶部,水平方向平均分隔(间隔距离相等)
.row-lse {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-evenly;
}
6. 垂直方向靠顶部,水平方向靠右侧
.row-le {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
}
7. 垂直方向可以设置为:靠顶部、居中、靠底部
前面6个是(垂直方向)靠顶部的效果,且(垂直方向)居中、靠底部的代码类似,如下:
/* 垂直方向居中,水平方向靠左侧 */
.row-cl {
display: flex;
flex-direction: row;
align-items: cenetr;
justify-content: flex-start;
}
/* 垂直方向居中,水平方向居中 */
.row-cc {
display: flex;
flex-direction: row;
align-items: cenetr;
justify-content: cenetr;
}
/* 垂直方向居中,水平方向平均间隔(中间间隔的宽度为两边间隔宽度的2倍) */
.row-csa {
display: flex;
flex-direction: row;
align-items: cenetr;
justify-content: space-around;
}
/* 垂直方向居中,水平方向两端对齐 */
.row-csb {
display: flex;
flex-direction: row;
align-items: cenetr;
justify-content: space-between;
}
/* 垂直方向居中,水平方向平均间隔(间隔距离相等) */
.row-cse {
display: flex;
flex-direction: row;
align-items: cenetr;
justify-content: space-evenly;
}
/* 垂直方向居中,水平方向靠右侧 */
.row-ce {
display: flex;
flex-direction: row;
align-items: cenetr;
justify-content: flex-end;
}
/* 垂直方向居底部,水平方向靠左侧 */
.row-el {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-start;
}
/* 垂直方向居底部,水平方向居中 */
.row-ec {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: cenetr;
}
/* 垂直方向居底部,水平方向平均间隔 */
.row-esa {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-around;
}
/* 垂直方向居底部,水平方向两端对齐 */
.row-esb {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
/* 垂直方向居底部,水平方向平均间隔 */
.row-ese {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-evenly;
}
/* 垂直方向居底部,水平方向靠右侧 */
.row-ee {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
}
二、column
将子元素在垂直方向进行布局:
1. 垂直方向靠顶部,水平方向靠左侧
.col-ll {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
2. 垂直方向靠居中,水平方向靠左侧
.col-lc {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
3. 垂直方向两端对齐,水平方向靠左侧
.col-lsb {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
}
4. 垂直方向平均间隔(中间间隔的宽度为两边间隔宽度的2倍),水平方向靠左侧
.col-lsa {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
}
5. 垂直方向平均间隔(间隔距离相等),水平方向靠左侧
.col-lse {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-evenly;
}
6. 垂直方向靠底部,水平方向靠左侧
.col-le {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
}
7. 水平方向可以设置为:靠顶部、居中、靠底部
前面6个是(水平方向)靠顶部的效果,且(水平方向)居中、靠底部的代码类似,如下:
/* 垂直方向靠顶部,水平方向居中 */
.col-cl {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/* 垂直方向居中,水平方向居中 */
.col-cc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 垂直方向平均间隔,水平方向居中 */
.col-csa {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
/* 垂直方向两端对齐,水平方向居中 */
.col-csb {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
/* 垂直方向平均间隔,水平方向居中 */
.col-cse {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
/* 垂直方向靠底部,水平方向居中 */
.col-ce {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
/* 垂直方向靠顶部,水平方向靠底部 */
.col-cl {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
}
/* 垂直方向居中,水平方向靠底部 */
.col-cc {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
/* 垂直方向平均间隔,水平方向靠底部 */
.col-csa {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
}
/* 垂直方向两端对齐,水平方向靠底部 */
.col-csb {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
}
/* 垂直方向平均间隔,水平方向靠底部 */
.col-cse {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-evenly;
}
/* 垂直方向靠底部,水平方向靠底部 */
.col-ce {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
三、更多属性
菜鸟教程(
https://www.runoob.com/css3/css3-flexbox.html)
四、代码太多了也有重复,好乱啊
我参考了vuetify的预置css,flex.css可以这么写:
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-column {
flex-direction: column;
}
.flex-column-reverse {
flex-direction: column-reverse;
}
.align-start {
align-items: flex-start;
}
.align-center {
align-items: center;
}
.align-end {
align-items: flex-end;
}
.justify-start {
justify-content: flex-start;
}
.justify-center {
justify-content: center;
}
.justify-space-around {
justify-content: space-around;
}
.justify-space-between {
justify-content: space-between;
}
.justify-space-evenly {
justify-content: space-evenly;
}
示例:
<link rel="stylesheet" href="./flex.css" />
<div class="d-flex flex-row align-center justify-center">
垂直居中,水平居中
</div>
<div class="d-flex flex-row align-center justify-space-between">
垂直居中,水平两端对齐
</div>
有补充请在评论区留言。
猜你喜欢
- 2025-08-02 React Native 常见问题集合
- 2025-08-02 React-Native 样式指南
- 2025-08-02 SpringBoot集成DeepSeek
- 2025-08-02 课堂点名总尴尬?试试 DeepSeek,或能实现点名自由!(附教程)
- 2025-08-02 手把手带你完成OpenHarmony藏头诗App
- 2025-08-02 Web设计练习:制作人脸识别网页(基于TensorFlow的开源模型)
- 2025-08-02 CSS支持 if / else 了
- 2025-08-02 CSS粘性页脚布局:从Flexbox到Grid的现代实现指南
- 2025-08-02 CSS 2025新特性解析:容器查询与嵌套选择器的高级应用案例
- 2025-08-02 如何设置Flexbox项目之间的距离
- 最近发表
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- c语言min函数头文件 (77)
- asynccallback (87)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 无效的列索引 (74)