2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中

2024-06-03 01:07:03

1.父盒子不限制宽度，子盒子跟随子盒子最长长度

如上图第二行子元素宽度会跟随第一行宽度
解决方案：
对第二行设置：width: max-content;
使其宽度跟随自身内容

2.flex布局时，挤压一侧固定宽度

如上图，左侧宽高为112rpx，宽度不生效
解决方案：
对左侧图片设置宽高的同时，设置最小宽高

效果如下：

3.父元素flex，子元素flex时宽度问题

例1：

如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第三行标签盒子也设置flex布局。此时的第三行宽度为自适应的231px。该宽度 = 100vw - 两侧空白边距 - 左侧图片 - 图片右侧margin。

例2：

如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第一行也设置flex布局。此时第一行的宽度也是跟随父盒子的最大宽度，既231px。再对第一行公司名称设置flex：1，实现不设置文字宽度的超出隐藏。

另：以上两种情况，右侧盒子无需设置flex：1。设置最小高度是为了，当第三行标签不存在的时候，右侧盒子高度会小于图片高度，由于父元素设置了aline-items：center，右侧盒子会居中。

4.flex常规情况下

常规情况下对父盒子flex布局，aline-items：center；右侧盒子flex：1，会自动换行。
但是想要左侧icon在最上方。
解决方案：
给文字和图片一样的行高，保证地址单行的情况下，呈现出居中的样式。然后取消父元素的alien-items：center。
效果如下：（多行行高过小，可以把图片和文字的行高同时增加）

1行地址：

多行地址：

5.小程序scroll-view中文字不换行超出隐藏不生效

display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;

6.div横向滚动，子元素文字超出隐藏不生效

横向滚动时父元素开启了以下属性：

子元素继承了父元素的不换行属性，所以不换行
解决方案：
只需要对子元素增加：
white-space: normal

7.居中

7.1

7.2.水平居中一个div

父：text-align: center;
子：display: inline-block;

7.3.垂直居中

父：display: table-cell; vertical-align: middle;或者
对所有的子：dispaly：inline-block；vertical-align：middle；或者
居中一个子：margin： auto；top：0；left：0；right：0;botton:0;    注：p，span不可用

2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中相关推荐

html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
html实现左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
[css] flex布局的缺点有哪些？（除兼容性外）
[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目 ...
css flex布局模型（CSS justify-content 属性） - 代码案例
css flex布局模型(CSS justify-content 属性) - 代码案例效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
2022全新抖音取图表情包小程序+创作者入驻+流量主
正文: 2022全新抖音取图表情包小程序+创作者入驻+流量主,没编译过的go语言文件,暂时没教程,有兴趣的自行去测试吧,看这界面感觉还是非常不错的一款源码,功能也强大. 程序: wwwu.lanzou ...
虎年降至.一款2022虎年为主的一款头像制作小程序源码。
现如今在线副业已经成为一种趋势,越来越多的人选择副业作为起步.小程序凭借不占内存.无论前期投入还是后期维护,成本都较低:如果你想副业来赚钱,选择小程序是非常不错的选择,有很多人可能会问,我不会做小程序 ...
2022 个人目标日历定作工具微信小程序源码
这是一个个人目标日历制作小工具简单来说就相当于手机上面带的提醒事项类似另外拥有日历查看功能 2022 个人目标日历定作工具微信小程序源码
微信小程序：2022虎年新UI春节送祝福微信小程序
昨天好像也发了一款祝福语的小程序吧,然后今天就看到很多小伙伴上线运营了这是一款网友用以前小编发过的一款端午送祝福改的一款小程序里面的背景图包括祝福语都已经修改成与虎年相关的内容了总体来说找的背景 ...

最新文章

热门文章