vue项目justify-content: flex-end与end区别

最新推荐文章于 2024-05-22 18:20:40 发布
最新推荐文章于 2024-05-22 18:20:40 发布
阅读量1.7k 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43258615/article/details/129186916
版权

一、vue项目启动,页面报出错误警告,如下

二、网上搜索“start value has mixed support, considerusing flex-start instead” 因为CSS写法不规范导致的。

三、解决,将当前页面中的justify-content: end改为justify-content: flex-end即可.

四、为什么用end不规范,由于end对于框架中,类似于关键字符,搜索end能出来很多使用方法

 

五、因此,如果对于单个页面,使用 justify-content: end是没有问题的;

但是如果在框架中,就要规范使用justify-content: flex-end的布局方式.

jojo~.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动web开发重点3：justify-content:flex-end和flex-direction: row-reverse的区别
小黄呀呀呀的博客
02-15 1237
justify-content:flex-end主轴方向的子元素全部贴在主轴的最右边，子元素之间的排列顺序是不变的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt
justify-content: flex-end和justify-content: end的区别
qq_33183632的博客
04-20 2884
因此，两个属性的作用和适用的范围不同，需要根据具体的使用场景进行选择。在应用 Flexbox 布局时，建议使用 "justify-content: flex-end"。在Flexbox布局中，"justify-content: flex-end" 和 "justify-content: end" 的区别在于它们的表现方式不一样。
CSS样式的justify-content: end
最新发布
听海边涛声
05-22 139
CSS样式的justify-content: end
justify-content: end；不起作用
weixin_44017013的博客
11-07 1014
结论 ： end 属性要写成 flex-end 才行。
justify-content: end;不起作用
飞翔的熊blabla
09-01 3128
是 justify-content: flex-end;
flex布局中justify-content: end；移动端不生效问题
weixin_39984859的博客
11-25 1303
flex布局中靠右定位一直不好用，尝试了几次后发现需要用到flex-end属性。
Vue使用vue-draggable 插件在不同列表之间拖拽功能
10-15
justify-content: space-between; align-items: center; padding: 20px 30px; } .theme-left, .theme-right { width: 45%; min-width: 270px; max-width: 300px; } .selected-list, .theme-right-list { list-style...
uni-app之flex布局教程 uniapp在线教程 uni app视频教程
06-20
4. `justify-content`：沿主轴对齐方式，可选值有flex-start（起始位置）、flex-end（结束位置）、center（居中）、space-between（两端对齐，项目之间间隔相等）和space-around（每个项目两侧的间隔相等）。...
vue分页组件vue2
08-12
justify-content: center; } .active { background-color: #4caf50; color: white; } ``` 以上就是创建Vue2分页组件的基本步骤和涉及的关键知识点。通过这个组件，你可以轻松地在任何需要分页功能的地方进行...
flexcss移动端flex布局神器
08-10
5. **对齐方式**：`justify-content`控制子元素在主轴上的对齐，例如`flex-start`、`flex-end`、`center`、`space-between`和`space-around`。`align-items`则控制子元素在交叉轴上的对齐，同样有相应的选项。 6. *...
Sneakers_flex_test：使用CodeSandbox创建
02-16
- `justify-content`: 定义了沿主轴上的项目对齐方式，包括flex-start（靠左/上），flex-end（靠右/下），center（居中），space-between（两端对齐）和space-around（均匀分布）。 - `align-items`: 控制沿交叉轴...
Vue - flex布局 justify-content: space-around / space-between 最后一行元素不对其解决方案（JS）
王佳斌
05-24 6441
前言 本文的解决方案不止适用于 Vue（只不过用它做示例），原生 JS 或其他框架均可借助该算法完成。 使用 flex 布局时，设置 justify-content: space-around / space-between 属性后，会出现如下图所示问题： 我们希望最后一行 居左对齐 排列，如下图所示： 解决方案 解决方案有很多种，本文使用 补齐元素 方式完成，而非 :after 插入或更改布局。 Gitee 仓库地址（代码中有超级详细的注释）：https://gitee.com/wangjia
css弹性盒模型详解----justify-content
qq_34451947的博客
11-13 1281
本篇文章详细介绍justify-content justify-content的几种属性 flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。 flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项...
有关flex布局相关的常见属性总结
xingkong的博客
07-27 332
关于flex布局中常用的一些属性的总结
flex布局
weixin_30920091的博客
04-09 74
写在前面：本文参考阮一峰的网络日志及部分网友知识综合讲解，只要能讲清楚就行嘛哈哈哈 1 flex布局 1.1 引入 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。 CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用margin: 0 auto...
vue：css js justify readonly
洪君的博客
01-15 332
space-between 靠两边 排版 space-around 居中排版 布局格式   只读&amp; 禁用  readonly="true" disabled="true"   export default { data() { return { addformObj: [], // [] &amp; '' 是有区别的 ...
CSS3弹性布局中的justify-content、flex-direction的有机组合
Rudon滨海渔村的博客
02-21 1523
[1] 定义 1. 先看个大概： /* 对齐方式 */ justify-content: center; /* 居中排列 */ justify-content: start; /* 从行首开始排列 */ justify-content: end; /* 从行尾开始排列 */ justify-content: flex-start; /* 从行首起始位置开始排列 */ justify-content: flex-end; /* 从行尾位置开始排列 */ justify
CSS弹性布局justify-content的用法
woliuhuaqiangla的博客
03-20 413
在制作静态页面的时候，弹性布局可以给我们节省大量的代码。顾名思义，弹性布局，就和弹簧一样，布局十分方便，display-flex还有很多特别实用的属性，比如竖着排序什么的，都可以应用到很多的场景。这是把元素从最右面开始排序，默认是左排序。他可以让你的内容对齐变得十分得心应手。这是中间和两边都留间距的对齐。这是中间对齐，两边紧贴的对齐。就给大家说这四种最常用的布局。这是给一个块加上弹性布局。
<template> <view> <uni-card v-for="(comment, index) in finalResult" :key="index" title="obj.personName" sub-title="obj.remark" extra="额外信息" :thumbnail="avatar"> <text class="uni-body">姓名：{{obj.personName}}~户主或户主关系{{obj.relation}}~性别：{{obj.sex}}~民族：{{obj.nation}}~出生日期：{{obj.birthday}}~身份证件编号{{obj.id}}~籍贯:{{obj.nativeplace}}~文化程度：{{obj.education}}</text> <view class="action-container"> <button class="delete-button" @click="deleteComment(index)">删除</button> </view> </uni-card> <button class="delete-all-button" @click="deleteAllComments">删除所有评论</button> </view> </template> <script> export default { data() { return { finalResult: [], avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }; }, onShow() { this.finalResult = uni.getStorageSync("data") }, methods: { deleteAllComments() { // 清空 finalResult 数组 this.finalResult = []; // 清空存储中的评论数据 uni.clearStorageSync(); }, deleteComment(index) { // 根据索引从 finalResult 数组中删除评论 this.finalResult.splice(index, 1); // 获取指定评论的键名 let dataArray = uni.getStorageInfoSync(); let keyArray = dataArray.keys; let commentKey = keyArray[index]; // 从存储中删除指定评论数据 uni.removeStorageSync(commentKey); } } }; </script> <style lang="scss"> .action-container { display: flex; justify-content: flex-end; } .delete-button { background-color: #f00; color: #fff; border: none; padding: 5px 10px; margin-top: 5px; cursor: pointer; } .delete-all-button { background-color: #f00; color: #fff; border: none; padding: 10px; margin-top: 10px; cursor: pointer; } <style>这段代码有什么问题？
07-23
这段代码存在以下问题： 1. 在模板中，`<uni-card>` 组件的属性值应该是动态绑定的，但是在代码中直接使用了字符串 `"obj.personName"`、`"obj.remark"`、`"额外信息"` 和 `avatar`。应该修改为动态绑定的语法，例如 `:title="comment.personName"`、`:sub-title="comment.remark"`、`:extra="额外信息"` 和 `:thumbnail="avatar"`。 2. 在 `<text>` 标签内使用了 `{{obj.xxx}}` 的语法来展示动态数据，但是在代码中并没有定义 `obj` 对象。应该将 `obj` 替换为 `comment`，即 `{{comment.personName}}`、`{{comment.relation}}` 等等。 3. 在 `onShow` 生命周期钩子函数中，`this.finalResult = uni.getStorageSync("data")` 的代码存在问题。应该使用 `try-catch` 块来捕获可能出现的异常，并处理异常情况。 4. 在 `deleteComment` 方法中，获取键名的代码存在问题。应该使用 `let dataArray = uni.getStorageInfoSync().keys;` 来获取键名数组，而不是先获取全部信息再取出键名数组。 5. 在 `deleteComment` 方法中，删除指定评论数据的代码存在问题。应该使用 `uni.removeStorageSync(commentKey)` 来删除指定键名的数据，而不是 `uni.removeStorageSync(index)`。 6. `<style>` 标签的闭合标签写错了，应该是 `</style>` 而不是 `<style>`。 以下是修复后的代码： ```vue <template> <view> <uni-card v-for="(comment, index) in finalResult" :key="index" :title="comment.personName" :sub-title="comment.remark" :extra="额外信息" :thumbnail="avatar"> <text class="uni-body">姓名：{{comment.personName}}~户主或户主关系{{comment.relation}}~性别：{{comment.sex}}~民族：{{comment.nation}}~出生日期：{{comment.birthday}}~身份证件编号{{comment.id}}~籍贯:{{comment.nativeplace}}~文化程度：{{comment.education}}</text> <view class="action-container"> <button class="delete-button" @click="deleteComment(index)">删除</button> </view> </uni-card> <button class="delete-all-button" @click="deleteAllComments">删除所有评论</button> </view> </template> <script> export default { data() { return { finalResult: [], avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }; }, onShow() { try { this.finalResult = uni.getStorageSync("data"); } catch (e) { console.error("获取评论数据失败:", e); } }, methods: { deleteAllComments() { this.finalResult = []; try { uni.clearStorageSync(); } catch (e) { console.error("清空评论数据失败:", e); } }, deleteComment(index) { this.finalResult.splice(index, 1); try { let keyArray = uni.getStorageInfoSync().keys; let commentKey = keyArray[index]; uni.removeStorageSync(commentKey); } catch (e) { console.error("删除评论数据失败:", e); } } } }; </script> <style lang="scss"> .action-container { display: flex; justify-content: flex-end; } .delete-button { background-color: #f00; color: #fff; border: none; padding: 5px 10px; margin-top: 5px; cursor: pointer; } .delete-all-button { background-color: #f00; color: #fff; border: none; padding: 10px; margin-top: 10px; cursor: pointer; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值