flex布局 主轴宽度不足时，子项目宽度设置不起作用

最新推荐文章于 2024-08-17 21:15:18 发布
最新推荐文章于 2024-08-17 21:15:18 发布
阅读量2.2k 收藏
点赞数 1
分类专栏： front 文章标签： css flex布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qkzia123/article/details/79071558
版权 
.wrap{
    display: flex;
    flex-direction: column;//主轴为竖向
    align-items: center;
}
若容器内竖向空间不足，子项目的height可能不起作用，被直接压缩为0，此时需设置其flex属性(flex: flex-grow, flex-shrink 和 flex-basis的简写)以解决被压缩问题：
style="display: flex;justify-content: space-around;margin-bottom: 20px;flex: 0 0 auto;width: 100%;"

 

 


                

        

        

    

  


    

      

        

            

              
                
                  qkzia123
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
flex 宽度计算

				
			

			

				

					Cexo_Ln_Wfn的博客
				

				

					08-11
					
					1337
					
				

			

		

		

			
				
最近看到一些关于flex的面试题，发现其中关于宽度计算的问题比较多，网上的解释也有些不太完整，于是自己总结了一下。若对 flex 不是很了解，可以看一下阮一峰老师的教程 Flex 布局教程：语法篇
flex 属性值
一般来说，使用 flex 时都是作为简写方式，类似于 background 属性可以包含 background-image  background-repeat 等属性。flex 属性是 flex-grow ,  flex-shrink  和 flex-basis 的简写，默认值为 0 1 au

			
		

	



                

              
                



	

		

			

				
					
【FlexBox】display : flex 布局下，父元素宽度不能自适应子元素宽度

				
			

			

				

					InkingWT的博客
				

				

					09-23
					
					5022
					
				

			

		

		

			
				
最近闲来无事准备写个后台管理的前端模板，顺便拿 FlexBox 练手。

一、概述：


<div class="menu-box">
    <ul class="menu-group">
        <li class="menu-item"> ... </li>
        <li class="menu-item"> ... </li>
        <li class="menu-item"> ... &

			
		

	



                


  
              

                


	

		

			

				
					
【bug记录5】flex横向布局时子元素设置宽度无效

					
最新发布

				
			

			

				

					weixin_57208584的博客
				

				

					08-17
					
					459
					
				

			

		

		

			
				
对父元素list使用了flex布局之后，尝试将其子元素item固定宽度，但发现。宽度设置不生效并且实际宽度被压缩了。，代表元素不允许被弹性布局挤压。优先适配自己的父元素的宽度。在item子元素里面加一个。

			
		

	





	

		

			

				
					
flex布局设置width无效

				
			

			

				

					m0_47531829的博客
				

				

					02-14
					
					3138
					
				

			

		

		

			
				
今天做项目遇到一个这样的问题，

页面的一部分内容是这样的，因为用到的是ant design mobile组件库，这里
我才用的是ant组件库里面的flex布局，但是在ant组件库的flex布局，不像栅格布局那样，自己可以定义每行的列数，因为在ant组件库中一行flex布局的列数是由 <Flex.Item>的多少来决定的，不换行，

在官网组件库里面看到了这个属性，于是就想给每个子元素的宽度为父元素的33.33%，设置成换行，应该就可以了吧，但是设置之后，发现设置的width不起作用，后来进行一

			
		

	



		

			
		



	

		

			

				
					
flex 布局中子元素设置宽度无效的解决办法

					
热门推荐

				
			

			

				

					UserGuan的博客
				

				

					01-05
					
					1万+
					
				

			

		

		

			
				
因为父元素设置了【display: flex】所以该父元素下所有的子元素都会默认加上【flex: 0 1 auto】。其中 1 就是 flex 中的 flex-shrink 属性，表示开启元素的收缩功能，所以子元素宽度才会失效。flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。默认值：0 1 auto。

			
		

	





	

		

			

				
					
【CSS】flex布局中子元素设置宽度失效

				
			

			

				

					流萤梦的博客
				

				

					02-18
					
					9404
					
				

			

		

		

			
				
先来盘一盘我自己遇到的问题场景，大概如图所示：



前提条件：box使用了flex布局，让div1和div2两端对齐，box未设置宽度，其宽度是自适应的，div2的宽度是固定的，div1的宽度理想状态是box的宽度减去div2的固定宽度。

简单来说就是，div2固定宽度，div1宽度自适应占满剩余空间。

问题现状：div1长度没超长的时候，没有问题。但当div1的内容长度超长了，div2设置的宽度失效，会被压缩。

而问题的原因主要在于flex的flex-grow和flex-shrink属性。

先.

			
		

	





	

		

			

				
					
详解CSS3伸缩布局盒模型Flex布局

				
			

			

				

					09-22
				

			

		

		

			
				
Flex布局的主要思想是使容器能根据可用空间调整其子项目的宽度、高度和顺序。容器会分配剩余空间，或者在必要时收缩项目以适应容器。`flex-direction`属性定义了主轴的方向，可设置为`row`（默认，水平方向）或`...

			
		

	





	

		

			

				
					
弹性布局-flex布局.zip

				
			

			

				

					05-18
				

			

		

		

			
				
在传统布局模式下，元素的尺寸和位置往往受到固定宽度和高度的限制，而Flex布局则允许元素根据容器大小动态调整自身尺寸和顺序，从而实现更高效的响应式设计。  **一、Flex容器**  1. **启用Flex布局：** 使用`...

			
		

	





	

		

			

				
					
基本布局_flex基本布局模板_flex_

				
			

			

				

					09-30
				

			

		

		

			
				
Flex布局是CSS3中引入的一种新的布局模式，它使得容器能够调整其子元素的宽度、高度以及顺序，以最佳方式填充可用空间。这在处理不同屏幕尺寸和设备类型时尤其有用，因为它们可以自适应地调整布局。  1. **容器属性*...

			
		

	





	

		

			

				
					
2022-12-29 [整理]flex弹性布局

				
			

			

				

					GAARA
				

				

					12-29
					
					577
					
				

			

		

		

			
				
0.前言
1.设置flex布局后的父子元素
2.容器(父元素)的属性
3.项目(子元素)的属性
4.示例一:flex布局实现flex容器中子元素的水平垂直居中
5.示例二:flex:1实现子元素平分flex容器宽度
6.示例三:换行,多行布局
7.示例四:flex-grow,flex-shrink和flex-basis属性的使用
7.1.flex-grow的使用
7.2.flex-shrink的使用
7.3.flex-basis与width和min-width,max-width的区别
7.4 flex-b

			
		

	





	

		

			

				
					
[ flex ] -- 父盒子ul为flex布局时宽度不够，子盒子li无法被撑开的问题(li的宽度被压缩)

				
			

			

				

					tuzi007a的博客
				

				

					09-14
					
					2638
					
				

			

		

		

			
				
[ flex ] -- 父盒子ul为flex布局时宽度不够，子盒子li无法被撑开的问题(li的宽度被压缩)

			
		

	





	

		

			

				
					
flex布局设置宽度不生效，高度生效

				
			

			

				

					Cool_so_cool的博客
				

				

					06-24
					
					4977
					
				

			

		

		

			
				
首先先理解一下这个flex
1 . 原理其实我也不太懂，后来才知道它的内部都是用动态公式进行内部计算的 。具体详细说，就不太懂。
2. 刚开始我是这样用的flex。
 .right-aisle-box {
      display: flex;
      flex: 1 1 360px;
      .box-content {
        flex-wrap: wrap;
        margin: 2px 10px;
        width: 175px;
        height:

			
		

	





	

		

			

				
					
flex布局下的宽度的问题

				
			

			

				

					m0_53438035的博客
				

				

					07-30
					
					5097
					
				

			

		

		

			
				
问题
flex布局下，宽度达到100%以上，发现无效即实际效果最多只能达到100%。
解答
我发现是我对flex布局还不够熟悉。flex布局有如下两个属性。

flex-grow属性：定义项目的放大比例
flex-shrink属性：定义项目的缩小比例

解释：
1：flex-grow属性：定义项目的放大比例。默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。
2：flex-shrink属性默认值为1，即如果空间不足将等比例缩小。如果有一个项目的值为0，其他项目为1，当空间不足时，该项目

			
		

	





	

		

			

				
					
父盒子设置flex布局子元素设置高和宽不生效问题

				
			

			

				

					weixin_57011137的博客
				

				

					06-10
					
					3997
					
				

			

		

		

			
				
这是因为定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性就是是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度和高度即设置的高度和宽度不生效。当flex-shrink设置为0时，表示大家都不缩小适应即设置的高度和宽度可以生效。所以，倘若给父元素设置了flex布局后，若要其子元素的width和height有效果，必须给子元素设置flex-shrink为0。...

			
		

	





	

		

			

				
					
flex布局

				
			

			

				

					kk的博客
				

				

					01-16
					
					6212
					
				

			

		

		

			
				
总结一下flex布局

			
		

	





	

		

			

				
					
CSS：flex布局

				
			

			

				

					CSPsy的博客
				

				

					06-07
					
					2008
					
				

			

		

		

			
				
CSS flex布局入门，flex布局学习，什么是 flex 布局，flex布局怎么用，flex布局主轴和交叉轴，flex布局的shrink，grow，basis，flex布局around，between和evenly 之间区别

			
		

	





	

		

			

				
					
Flex布局中 Flex项设置固定宽度的方法

				
			

			

				

					无止境学的博客
				

				

					05-11
					
					1767
					
				

			

		

		

			
				
思路就是flex-grow 和 flex-shrink 归零。

			
		

	





	

		

			

				
					
CSS3伸缩布局盒模型Flex布局详解

				
			

			

				

					
				

			

		

		

			
				
Flex布局的主要思想是让容器有能力让其子项目能够改变其宽度、高度、顺序，以最佳的方式填充可用空间。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小它们以防止溢出容器。  任何一个容器都可以指定为...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值