第一个练习flex

  1. 在pages下面创建页面

在pages.json下面配置文件位置

设置盒子排列方向:

 在<style>中设置盒子样式

每个页面的公共样式放在App.vue的style中

盒子排列水平换行:

 盒子在主轴的对齐方式:

 justify—content:space-around是每个盒子之间都有间隔:

align-items:flex-start 在交叉轴的起点对齐 

在容器中盒子交叉轴对齐方式 align-content(需要项目有多条基线)

 order:定义元素排列顺序

 align-self:与其他元素对齐方式不同/flex-shink:元素

目录

在pages下面创建页面

设置盒子排列方向:

​编辑 在

每个页面的公共样式放在App.vue的style中

盒子排列水平换行:

 盒子在主轴的对齐方式:

align-items:flex-start 在交叉轴的起点对齐 

 order:定义元素排列顺序

 align-self:与其他元素对齐方式不同/flex-shink:元素

随页面大小放大缩小


随页面大小放大缩小

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值