0
点赞
收藏
分享

微信扫一扫

【Uni-App社区小程序】011-flex布局


目录

​​一、我们的默认写法​​

​​1、代码​​

​​2、运行结果​​

​​二、flex基本使用​​

​​1、使得四个正方形在一行显示​​

​​代码:​​

​​结果:​​

​​2、加入我们再加两个正方形​​

​​代码:​​

​​结果:​​

​​3、自动换行​​

​​代码:​​

​​结果:​​

​​4、倒序换行​​

​​代码:​​

​​结果:​​

​​5、子组件居中显示(设置子组件对齐方式)​​

​​代码:​​

​​结果:​​

​​6、垂直居中​​

​​代码:​​

​​结果:​​

​​7、从上到下排列​​

​​代码:​​

​​结果:​​

​​8、设置指定的元素不被压缩​​

​​阐述:​​

​​代码:​​

​​结果:​​

​​9、两个(多个)元素平均分配宽度​​

​​代码:​​

​​运行结果:​​

​​10、根据权重分配宽度​​

​​描述:​​

​​代码:​​

​​运行结果:​​

一、我们的默认写法

1、代码

<template>
<view class="box">
<view class="box-item">1</view>
<view class="box-item">2</view>
<view class="box-item">3</view>
<view class="box-item">4</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {

}
},
methods: {

}
}
</script>

<style>
.box{
height: 500upx;
width: 100%;
border: 1upx solid #CCCCCC;
}
.box-item{
background: #1AAD19;
color: #FFFFFF;
height: 200upx;
width: 200upx;
line-height: 200upx;
font-size: 30upx;
font-weight: bold;
text-align: center;
}
.box-item:nth-of-type(odd){
background: #09BB07;
}
.box-item:nth-of-type(even){
background: #F76260;
}
</style>

 

2、运行结果

【Uni-App社区小程序】011-flex布局_html

 

二、flex基本使用

参考教程(阮一峰的flex教程):​​http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html​​

1、使得四个正方形在一行显示

代码:

【Uni-App社区小程序】011-flex布局_垂直居中_02

 

结果:

【Uni-App社区小程序】011-flex布局_web_03

 

2、加入我们再加两个正方形

代码:

【Uni-App社区小程序】011-flex布局_js_04

 

结果:

【Uni-App社区小程序】011-flex布局_css_05

 

3、自动换行

代码:

【Uni-App社区小程序】011-flex布局_html_06

 

结果:

【Uni-App社区小程序】011-flex布局_垂直居中_07

 

4、倒序换行

代码:

【Uni-App社区小程序】011-flex布局_web_08

 

结果:

【Uni-App社区小程序】011-flex布局_web_09

 

5、子组件居中显示(设置子组件对齐方式)

代码:

(不仅仅是居中,还有两端对齐等等)

(justify-content属性教程​​https://www.runoob.com/cssref/css3-pr-justify-content.html​​)

【Uni-App社区小程序】011-flex布局_js_10

 

结果:

(我们事先删除了其他四个正方形)

【Uni-App社区小程序】011-flex布局_web_11

 

6、垂直居中

代码:

(水平居中和垂直居中可以一起用!)

【Uni-App社区小程序】011-flex布局_web_12

 

结果:

【Uni-App社区小程序】011-flex布局_html_13

 

7、从上到下排列

代码:

【Uni-App社区小程序】011-flex布局_css_14

 

结果:

【Uni-App社区小程序】011-flex布局_js_15

 

8、设置指定的元素不被压缩

阐述:

【Uni-App社区小程序】011-flex布局_js_16

代码:

<template>
<view class="box">
<view class="box-item">1</view>
<view class="box-item">2</view>
<view class="box-item">3</view>
<view class="box-item">4</view>
<view class="box-item">5</view>
<view class="box-item">6</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {

}
},
methods: {

}
}
</script>

<style>
.box{
height: 500upx;
width: 100%;
border: 1upx solid #CCCCCC;
/* 使得四个正方形在一行显示,只需加一行代码 */
display: flex;
/* flex-direction: column; */
/* 子组件居中显示 */
/* justify-content: center; */
/* 垂直居中 */
/* align-items: center; */
}
.box-item{
background: #1AAD19;
color: #FFFFFF;
height: 200upx;
width: 200upx;
line-height: 200upx;
font-size: 30upx;
font-weight: bold;
text-align: center;
}
.box-item:nth-of-type(odd){
background: #09BB07;
}
.box-item:nth-of-type(even){
background: #F76260;
}
/* 设置第二个元素不被压缩 */
.box-item:nth-child(2){
flex-shrink: 0;/* 默认1是被压缩 */
}
</style>

 

结果:

【Uni-App社区小程序】011-flex布局_html_17

 

9、两个(多个)元素平均分配宽度

代码:

<template>
<view class="box">
<view class="box-item">1</view>
<view class="box-item">2</view>
<view class="box-item">3</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {

}
},
methods: {

}
}
</script>

<style>
.box{
height: 500upx;
width: 100%;
border: 1upx solid #CCCCCC;
/* 使得四个正方形在一行显示,只需加一行代码 */
display: flex;
/* flex-direction: column; */
/* 子组件居中显示 */
/* justify-content: center; */
/* 垂直居中 */
/* align-items: center; */
}
.box-item{
background: #1AAD19;
color: #FFFFFF;
height: 200upx;
/* 我们一般会将宽度设置为50%,但三个怎么办?四个呢? */
/* width: 50%; */
/* 使用flex使得平均每个占一份 */
flex: 1;
line-height: 200upx;
font-size: 30upx;
font-weight: bold;
text-align: center;
}
.box-item:nth-of-type(odd){
background: #09BB07;
}
.box-item:nth-of-type(even){
background: #F76260;
}
/* 设置第二个元素不被压缩 */
/* .box-item:nth-child(2){
flex-shrink: 0;/* 默认1是被压缩
} */
</style>

运行结果:

【Uni-App社区小程序】011-flex布局_css_18

 

10、根据权重分配宽度

描述:

【Uni-App社区小程序】011-flex布局_js_19

代码:

<template>
<view class="box">
<view class="box-item">1</view>
<view class="box-item">2</view>
<view class="box-item">3</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {

}
},
methods: {

}
}
</script>

<style>
.box{
height: 500upx;
width: 100%;
border: 1upx solid #CCCCCC;
/* 使得四个正方形在一行显示,只需加一行代码 */
display: flex;
/* flex-direction: column; */
/* 子组件居中显示 */
/* justify-content: center; */
/* 垂直居中 */
/* align-items: center; */
}
.box-item{
background: #1AAD19;
color: #FFFFFF;
height: 200upx;
/* 我们一般会将宽度设置为50%,但三个怎么办?四个呢? */
/* width: 50%; */
/* 使用flex使得平均每个占一份 */
flex: 1;
line-height: 200upx;
font-size: 30upx;
font-weight: bold;
text-align: center;
}
.box-item:nth-of-type(odd){
background: #09BB07;
}
.box-item:nth-of-type(even){
background: #F76260;
}
/* 设置第二个元素不被压缩 */
/* .box-item:nth-child(2){
flex-shrink: 0;/* 默认1是被压缩
} */
/* 根据权重分配宽度 */
.box-item:nth-of-type(1){
flex: 1;
}
.box-item:nth-of-type(2){
flex: 2;
}
.box-item:nth-of-type(3){
flex: 1;
}
</style>

运行结果:

【Uni-App社区小程序】011-flex布局_垂直居中_20

 

 

 

 

 

举报

相关推荐

0 条评论