vue(view同行显示)排列样式
程序员文章站
2022-03-13 21:31:35
view 1 2 3 4
view
<view class="view-flex">
<view class="item1">1</view>
<view class="item1">2</view>
<view class="item1">3</view>
<view class="item1">4</view>
<view class="item1">1</view>
<view class="item1">2</view>
<view class="item1">3</view>
<view class="item1">4</view>
</view>
css
.item1{
height:100rpx;
width:100rpx;
background-color:rgb(135, 209, 252);
border: 1px solid #fff
}
/* 同行显示 溢出隐藏 */
.view-flex{
display:flex;
}
/* 同行显示 溢出自动换行 */
.view-flex{
background-color:beige;
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content: space-between
}
/* 同行显示 水平方向为主轴 居左 */
.view-flex{
display: flex;
flex-direction:row;
}
/* 同行显示 水平方向为主轴 居右 */
.view-flex{
display: flex;
flex-direction:row;
justify-content: flex-end;
}
/* 同行显示 水平两端对齐 */
.view-flex{
display: flex;
flex-direction:row;
justify-content: space-between;
}
/* 同行显示 水平居中对齐 */
.view-flex{
display: flex;
flex-direction:row;
justify-content: center;
}
/* 同行显示 水平平均分布 */
.view-flex{
display: flex;
flex-direction:row;
justify-content: space-around;
}
/* 同行显示 水平平均 Y轴底部对齐 需设置高度 */
.view-flex{
display: flex;
flex-direction:row;
justify-content: space-around;
align-items:flex-end ;
height:300rpx;
}
/* 同行显示 水平平均 Y轴顶部对齐 需设置高度 */
.view-flex{
display: flex;
flex-direction:row;
justify-content: space-around;
align-items:flex-start ;
height:300rpx;
}
/* 同行显示 水平平均 Y轴居中对齐 需设置高度 */
.view-flex{
display: flex;
flex-direction:row;
justify-content: space-around;
align-items:center ;
height:300rpx;
}
本文地址:https://blog.csdn.net/tian_37/article/details/110622729
推荐阅读
-
vue router-view的嵌套显示实现
-
vue2.0 路由不显示router-view的解决方法
-
vue(view同行显示)排列样式
-
Vue -- 为表格的特定行或特定列增加样式 & 表格不显示表头
-
Android中使用自定义selector来实现view的点击效果以及view的显示样式
-
vue2.0 路由不显示router-view如何处理
-
vue2.0 路由不显示router-view的解决方法
-
有关在vue2.0中路由不显示router-view方法(详细教程)
-
解决vue2.0路由不显示router-view的问题
-
有关在vue2.0中路由不显示router-view方法(详细教程)