微信小程序布局

行动在路上

于 2021-12-02 08:18:31 发布

阅读量357

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序前端 css3 css

本文链接：https://blog.youkuaiyun.com/weixin_42668909/article/details/121668932

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了CSS3中的弹性布局，重点介绍了flex-direction属性，包括row、row-reverse、column和column-reverse四种方向设置，以及justify-content和align-items的对齐方式。同时，讲解了flex数字形式在平分布局中的应用，帮助开发者更好地理解和掌握移动端布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

布局

PC更侧重兼容，移动端更侧重布局。
从div+css至bootstrap到flexbox
弹性布局是css3推出的针对移动端的经典的布局形式，是对CSS2的补充

弹性容器的方向

display: flex;
布局形式
flex-direction: row;
定义主轴方向,如果此行缺省，则默认为row
row
行，横向从左往右排列
row-reverse：
从右到左的水平方向为主轴
column
列，纵向从上往下排列
column-reverse：
从下到上的垂直方向为主轴
justify-content:
弹性项目在主轴main-axis线上的对齐方式，flex-start左，flex-end右，center中，space-etween散列（左右紧靠边缘）,space-around散列（平均，左右不靠边缘）
align-items:
在容器中与主轴垂直方向的对齐方式。（主轴是横向则此为垂直方向对齐方式，主轴是纵向则为模向对齐方式）

.container {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

flex 数字形式

flex:1;平分布局

.container {
  
  display: flex;
  flex:1;

}