首页 > 其他分享 >弹性布局,flex-direction: column;盒子宽度不随着上面盒子变化

弹性布局,flex-direction: column;盒子宽度不随着上面盒子变化

时间:2024-02-01 13:58:52浏览次数:25  
标签:flex direction 盒子 color width font

需求大盒子里面的上面盒子药固定宽度下面的盒子要随着自己文字内容宽度,要把下面盒子变成行内块样式 这样就不随着上面盒子变化了

.nameInfo { //大盒子
                        margin-left: 28upx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;

                        .nameInfo-t {//盒子上面
                            width: 300upx;
                            font-size: 36upx;
                            font-weight: 500;
                            color: #333333;
                        }

                        .nameInfo-b {//盒子下面
                            width: auto;
                            display: inline-block !important;
                            height: 40upx;
                            background-color: rgba(255, 93, 111, 0.08);
                            padding: 2upx 20upx 2upx 12upx;
                            box-sizing: border-box;
                            border-radius: 10upx;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;

                            .imageStyle {
                                float: left;
                                image {
                                    width: 28upx;
                                    height: 30upx;
                                    margin-right: 4upx;
                                    margin-top: 4upx;
                                }
                            }

                            .nation {
                                float: left;
                                font-size: 24upx;
                                font-weight: 500;
                                color: #FF5D6F;
                            }
                        }
                    }

标签:flex,direction,盒子,color,width,font
From: https://www.cnblogs.com/prince11/p/18001058

相关文章

  • 为histb系统盒子刷入2ray进行内网穿透
    安装核心我的盒子是CM-101S-2hi3798mv100进入海纳思系统(histb.com)查找关键词即可查看安装脚本使用一键脚本搭建完成后安装面板——新一代Linux客户端安装配置教程|SKY博客(sky350.com)安装控制面板(AwebGUIclientofProjectVwhichsupportsV,S,TandJpro......
  • mybatis-flex框架多数据源缺陷以及IN和exists的区别及应用
    mybatis-flex框架多数据源情况下,跨数据源查询,因为没法用在一个queryWrapper查询,所以会需要分步查询,就需要使用到子查询。众所周知,子查询速度比join查询慢,所以多数据源有该缺陷。in关键字,和exist关键字,这两个是相反的。区别及应用场景in和exists的区别:如果子查询......
  • PCDN 流量盒子 系统定制 OEM看过来
    赋能每个家庭,闲置带宽流量可以变成收益的PCDN机顶盒,各位听说过吗?PCDN是一种高效的内容分发网络,它通过负载均衡、数据优化、网络优化等技术,提高网站的可用性、稳定性和性能。PCDNOEM,电话/微信:13540308877我们专注于使用自主可控的核心技术构建跨越“云-边-端”的全栈边缘计算,......
  • 小型化微型化的边缘计算盒子有哪些优势
    边缘计算网关、边缘计算盒子的小型化和微型化,是当前的一大趋势,小型化和微型化将赋予边缘计算网盒更丰富的场景适用能力,同时还可以降低成本、控制功耗以及便捷扩展组网,本篇就为大家简单介绍一下小型化微型化的边缘计算盒子的优势: 1、便携性通过更加集约和紧凑的设计,边缘计算盒......
  • flex-shrink计算上的一些细节
    <!DOCTYPEhtml><htmllang="cmn-hans"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title&g......
  • HttpRetryException: cannot retry due to redirection, in streaming mode
     failcannotretryduetoredirection,instreamingmodeexecutingPOSThttps://vsp.allinpay.com/apiweb/gateway/payfeign.RetryableException:cannotretryduetoredirection,instreamingmodeexecutingPOSThttps://vsp.allinpay.com/apiweb/gateway/pay......
  • 【LeetCode1747. 应该被禁止的 Leetflex 账户】[MySQL 用户变量/Pandas]面向过程编程;
    目录题目地址MySQL代码等效pandas代码题目地址https://leetcode.cn/problems/leetflex-banned-accounts/description/MySQL代码witht1as(selectaccount_id,ip_address,loginastick,"login"asmytypefromLogInfounionallselectaccount_id,ip......
  • MSFlexGrid应用
    SubOnLButtonDown(ByValItem,ByValFlags,ByValx,ByValy)DimobjConnectionDimobjCommandDimobjRecordsetDimstrConnectionStringDimstrSQL,sSQLDimkWh,PFC,kW,A1,A2,A3,V1,V2,V3,Line_Name,Meter_ID,Line_IDDimstrkWh,strkW,strPFC,strA1,strA2,strA3,st......
  • 盒子模型
    盒子模型块级元素display:block独占一行,对宽度、高度、对齐方式等支持例如:divullih1-h6p等内联级元素display:inline不独占一行,对宽度、高度、对齐方式等不支持,跟(块级相反)例如:aspan等内联块级元素display:inline-block不独占一行,对宽度、高......
  • [源码分析] - flex 标准文档导读与 一个rust实现解析
    本文是w3中css-flexbox[标准文档](CSSFlexibleBoxLayoutModuleLevel1(w3.org)解读.(2023.1),并对一些开源实现进行调研分析.文档导读csslayoutmodecsslayout模式用于确定在盒模型中的元素如何排布(大小与位置),在css2.1中有如下几种方式.blocklayout,块级别......