常用的flex布局css样式

最新推荐文章于 2024-05-21 19:43:55 发布

l_yilan

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量741

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/l_yilan/article/details/119612915

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了Flex布局的常用CSS样式，包括方向设置、对齐方式以及主轴上的各种排列方式，如居中、两端对齐等。同时，还提供了水平和垂直方向上固定与自适应宽度/高度的实现方法，特别适用于微信小程序开发中的适配问题。通过这些样式，开发者可以更高效地创建响应式和动态布局。

摘要由CSDN通过智能技术生成

常用的flex布局css样式

flex布局我在微信小程序开发中用的比较多，不用考虑太多适配问题。

.flex{display: flex;display:-webkit-flex;}
.flex-row{flex-direction: row;}
.flex-col{flex-direction: column;}
.flex-ai{align-items: center;}
.flex-jc{justify-content: center;}
/****主轴水平、垂直方向***/
.flex-rowc{display: flex;flex-direction: row;justify-content: center;align-items: center;}//水平垂直居中
.flex-rowl{display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}//主轴为水平方向，起点在左端，垂直居中
.flex-rowr{display: flex;flex-direction: row;justify-content: flex-end;align-items: center;}//主轴为水平方向，起点在右端，垂直居中
.flex-colc{display: flex;flex-direction: column;justify-content: center;align-items: center;}主轴为垂直方向，垂直居中
.flex-colt{display: flex;flex-direction: column;justify-content: center;align-items: flex-start;}主轴为垂直方向，起点在上沿，水平居中
.flex-colb{display: flex;flex-direction: column;justify-content: center;align-items: flex-end;}主轴为垂直方向，起点在下沿，水平居中
.flex-between{display: flex;justify-content: space-between;align-items: center;flex-direction: row;}//两端对齐，项目之间的间隔都相等
.flex-around{display: flex;justify-content: space-around;align-items: center;flex-direction: row;}//每个项目两侧的间隔相等

**水平方向（一个固定宽度，一个自适应填充）**
/* 固定宽度 */
.fixedWidth{flex:0 0 auto;}
/* 自适应宽度 */
.autoFullWidth{flex:1 1 auto;}

**垂直方向（一个固定高度，一个自适应填充）**
/**固定高度*/
.fixedHig{flex: 0;}
/**自动填充剩余区域*/
.autoFullHig{flex: 1;}