小程序布局入门

留白的云

已于 2023-06-29 15:18:57 修改

阅读量163

点赞数 1

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

于 2021-05-08 15:43:07 首次发布

本文链接：https://blog.csdn.net/huyawenz/article/details/116527026

版权

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

7 篇文章 0 订阅

订阅专栏

在不写个博客我就疯了。我是android转过来的小程序开发。经常让css样式搞死。项目是写了好多个了。但是还是不知道如何让小程序的控件居中。每次都是查查完以后复制。结果最后就是我什么也没记住。所以我决定。好好的练练css样式。并且要知其然知其所以然。奥利给。

不会就去看这个。弹性布局。讲的挺好的。这么长时间没写了。又忘了。

Flex 布局教程：语法篇 - 阮一峰的网络日志

1、让控件水平居中。

a、竖直排列，水平居中

//布局
<view class="root">
  <view class="title">CAFF服务管理系统</view>
  <view class="title">CAFF服务管理系统</view>
</view>

//样式
.root{
  display:flex;
  flex-direction: column;
  align-items: center;
}
.title{

}

b、水平排列，水平居中

//布局
<view class="root">
  <view class="title">CAFF服务管理系统</view>
  <view class="title">CAFF服务管理系统</view>
</view>

//样式
.root {
  display: flex;
  flex-direction: row;
  justify-content: center;

}

.title {

}

2、让控件垂直居中

a、竖向排列，垂直居中

//布局
<view class="root">
  <view class="title">CAFF服务管理系统</view>
  <view class="title">CAFF服务管理系统</view>
</view>

//样式
.root {
  display: flex;
  padding:25px;
  background-color: red;
  flex-direction: column;
  justify-content: center;
}

.title {

}

b、水平排列，垂直居中

//布局
<view class="root">
  <view class="title">CAFF服务管理系统</view>
  <view class="title">CAFF服务管理系统</view>
</view>

//样式
.root {
  display: flex;
  padding:25px;
  background-color: red;
  flex-direction: row;
  align-items: center;
}

.title {

}

3、让控件中心居中

a、竖向排列，中心居中

//布局
<view class="root">
  <view class="title">CAFF服务管理系统</view>
  <view class="title">CAFF服务管理系统</view>
</view>

//样式
.root {
  display: flex;
  padding:25px;
  background-color: red;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.title {

}

b、横向排列，中心居中

//布局

<view class="root">
  <view class="title">CAFF服务管理系统</view>
  <view class="title">CAFF服务管理系统</view>
</view>


//样式
.root {
  display: flex;
  padding:25px;
  background-color: red;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {

}

样式后续。持续学习更新中。