使用flex布局实现宽度自适应

最新推荐文章于 2024-06-10 15:38:55 发布
最新推荐文章于 2024-06-10 15:38:55 发布
阅读量6.9k 收藏 2
点赞数 1
文章标签： 前端 ViewUI
原文链接：http://www.cnblogs.com/zhaodz/p/11581355.html
版权

1.两侧固定，中间自适应

 
  
 
   

     .box{ 
   
 
   

         width: 100%; 
   
 
   

         display: flex; 
   
 
   

         height: 300px; 
   
 
   

     } 
   
 
   

     .left{ 
   
 
   

         width: 100px; 
   
 
   

         height: 200px; 
   
 
   

         background-color:red; 
   
 
   

     } 
   
 
   

     .right{ 
   
 
   

         width: 100px; 
   
 
   

         height: 200px; 
   
 
   

         background-color:red; 
   
 
   

     } 
   
 
   

     .center{ 
   
 
   

         flex: 1; 
   
 
   

         height: 300px; 
   
 
   

         background-color: lime; 
   
 
   

     } 
   
 
   
 
   

       
   
 
   
 
   

     <body> 
   
 
   

             <div class="box"> 
   
 
   

              <div class="left"></div> 
   
 
   

             <div class="center"></div> 
   
 
   

              <div class="right"></div> 
   
 
   

             </div> 
   
 
  
 
  
 
 
 
 
 
2.左侧固定，右侧自适应
 
 
 
  
.box{
    width: 100%;
    display: flex;
    height: 300px;
}
.left{
    width: 100px;
    height: 200px;
    background-color:red;
}
.right{
    flex: 1;
    height: 300px;
    background-color:lime;
}



<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/zhaodz/p/11581355.html

                

        

        




    




    

      

        

            

              
                
                  R398562246
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
使用flex让父盒子内子盒子自适应宽度

				
			

			

				

					Andrew_SJ的博客
				

				

					07-20
					
					2160
					
				

			

		

		

			
				
使用flex让父盒子内子盒子自适应宽度。
父盒子设置flex属性，子盒子设置flex-grow属性。
注意，以下代码使用了tailwindcss来写元素样式。
<!-- 父元素设置flex属性 -->
<div class="flex">
	<!-- 子元素设置flex-grow，让其自动填充剩余空间 -->
  <div class="w-2/5 h-36 flex-grow ml-4 bg-red-400">Left</div>
  <d

			
		

	



                

              
                



	

		

			

				
					
css常用布局-flex自适应布局

				
			

			

				

					蓑笠翁
				

				

					06-20
					
					7617
					
				

			

		

		

			
				
一、 Flex布局简介
flex布局基于盒状模型，原意为弹性布局，用来为盒状模型提供最大的灵活性。为CSS中display的一个属性；常用于我们常见的分布布局，比如说多个块并列，自适应屏幕宽度等；在移动端应用广泛。目前所有的浏览器都支持flex布局。
二、应用

...

			
		

	



                


  
              

                


	

		

			

				
					
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）_css flex

					
最新发布

				
			

			

				

					2401_85122951的博客
				

				

					06-10
					
					910
					
				

			

		

		

			
				
此时宽度被压缩了，其实此时是按照比例缩小了，由之前的按照100份来占比，现在相当于按照1100份来占比（40% 40% 30%），此时的宽度就是1000 * (40/110) 大概就是363.64。在宽度总和超出父盒子的宽度时，希望保持每个子盒子的准确宽度，那就只能分行排列（一行排列会被按比例压缩，如上图）。现在，我们三个子盒子的宽度是固定的，因此实现不了自适应，我们可以使用 %（百分比）方式设置各个子盒子相对于父盒子所占的百分比。回到场景二，如果三个盒子的宽度占比总和大于100%，页面效果又是怎样的？

			
		

	





	

		

			

				
					
[css] flex 子元素自动撑开父元素宽度

				
			

			

				

					qq_14993591的博客
				

				

					11-03
					
					2966
					
				

			

		

		

			
				
这样，子元素将会垂直排列在一列内，并自动撑开父元素的宽度。同样地，如果子元素的高度总和超过了父元素的高度，则子元素会被压缩，以适应父元素的高度。这样，子元素将会水平排列在一行内，并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度，则子元素会被压缩，以适应父元素的宽度。对于水平排列的情况，我们可以设置父元素的。对于垂直排列的情况，我们可以设置父元素的。

			
		

	



		

			
		



	

		

			

				
					
Flex布局常见子项属性

				
			

			

				

					JHY97的博客
				

				

					01-06
					
					1996
					
				

			

		

		

			
				
1.flex属性

flex属性定义子项分配剩余的空间，用flex表示占据多数分数

1.1案例一 父项内两边子项固定宽度，中间子项宽度可自适应浏览器屏幕宽度变化


<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>


<st

			
		

	





	

		

			

				
					
flex布局的简单用法 2021-09-01

				
			

			

				

					weixin_46022934的博客
				

				

					09-01
					
					259
					
				

			

		

		

			
				
复习Flex布局的用法flex包含的5种属性flex-direction的用法justify-content的用法align-items的用法:flex-grow用法flex的用法(简单)演示代码:
flex包含的5种属性
1.flex-direction:元素排列方向(作用于父元素)
2.justify-conten:横轴元素的排列方式(作用于父元素)
3.align-items:纵轴元素的排列方式(作用于父元素)
4.flex-grow:放大比例(作用于子元素)
5.flex:自动|继承父元素|初始大小

			
		

	





	

		

			

				
					
样式布局flex----一行五个元素，随着屏幕变化宽度发生改变

				
			

			

				

					CC酱写前端的博客
				

				

					07-29
					
					5175
					
				

			

		

		

			
				
CSS  flex布局

			
		

	





	

		

			

				
					
flex布局实现左侧文字溢出省略右侧文字自适应

				
			

			

				

					12-13
				

			

		

		

			
				
想要实现一个左侧文字可以根据文字长短自动调整宽度，当一行显示不下时，不挤压右侧文字空间，左侧文字溢出省略。同理当右侧文字变长的时候，右侧文字全显示，左侧文字被挤压后溢出省略的效果。我说的可能不是很清楚...

			
		

	





	

		

			

				
					
CSS 实现div宽度根据内容自适应

				
			

			

				

					09-24
				

			

		

		

			
				
需要注意的是，内联元素如`span`或`a`天生就是宽度自适应的，它们的宽度会根据内容自动调整，但通常不适用于需要换行或独立占据一行的情况，而div作为块级元素，更适合用于构建这样的布局。  此外，还可以使用其他...

			
		

	





	

		

			

				
					
使用Flex布局实现携程APP首页布局

				
			

			

				

					01-19
				

			

		

		

			
				
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是CSS3中的一种布局模式，主要用于解决传统盒模型在处理复杂网页布局时遇到的问题，尤其是对于响应式设计和自适应布局有着强大的支持。在携程APP首页布局中，...

			
		

	





	

		

			

				
					
详解flex实现左右布局中按钮溢出隐藏效果

				
			

			

				

					09-22
				

			

		

		

			
				
本文将深入探讨如何使用Flex布局来解决这个问题，特别是如何在左右布局中实现按钮溢出隐藏的效果。  首先，让我们回顾一下Flex布局的基本概念。Flex布局，全称为Flexible Box，是CSS3中的一种布局模式，它为复杂页面...

			
		

	





	

		

			

				
					
Flex布局做出自适应页面(语法和案例)

				
			

			

				

					11-20
				

			

		

		

			
				
Flex布局简介
Flex英文为flexiable box，翻译为弹性盒子，Flex布局即弹性布局。
Flex布局为盒子模型提供了很大的灵活性，任何一个容器都可以指定为Flex布局，设置方法为：

.box{
    display: flex;
}
行内元素使用Flex布局

.box{
    display: inline-flex;
}
在webkit内核的浏览器上必须加上webkit前缀

.box{
    display: flex;
    display: -webkit-flex;
}
注意：使用Flex布局之后，里面的float、clear、vertical-align属

			
		

	





	

		

			

				
					
flex中dategrid自适应宽度实现

				
			

			

				

					10-12
				

			

		

		

			
				
flex中让dategrid里面的列宽根据内容自适应宽度的方法

			
		

	





	

		

			

				
					
flex弹性布局

				
			

			

				

					qq_44718039的博客
				

				

					06-22
					
					774
					
				

			

		

		

			
				
flex布局

			
		

	





	

		

			

				
					
css宽度适应内容

				
			

			

				

					JiuMeilove的博客
				

				

					01-13
					
					794
					
				

			

		

		

			
				
废话不多说,看如下demo,我需要将下面这个盒子的宽度变成内容自适应方法有很多,如下。

			
		

	





	

		

			

				
					
两边宽度固定，中间宽度自适应的几种布局方法

				
			

			

				

					xiamocsdn的博客
				

				

					04-24
					
					3473
					
				

			

		

		

			
				
我们在用css设置页面布局的时，归根结底是要让页面中的块按照我们的需求进行排列组合。以下是几种常用的中间自适应，两边固定的布局方法。
一、flex弹性盒布局：
核心：将父元素设置为弹性盒布局：display:flex;
html代码：
<div id="father">
		<div id="son1"><h3>宽度固定</h3></div&g...

			
		

	





	

		

			

				
					
Flex布局

				
			

			

				

					weixin_43475142的博客
				

				

					03-18
					
					493
					
				

			

		

		

			
				
CSS样式

			
		

	





	

		

			

				
					
flex布局实现左右都不定宽的自适应布局

				
			

			

				

					Archimelan的博客
				

				

					11-03
					
					8606
					
				

			

		

		

			
				
第一个应用：固定宽度+自适应布局，
需求如下：左边图片定宽，图示选中区域为自适应布局
实现：这个比较简单，父元素设置display: flex; 右边子元素设置：flex-grow: 1，这样子右边会自动撑开空白的地方。










第二个应用：完全显示的文本+超出省略的文本（两边都不定宽）：
需求如下：邀请时间完全显示，昵称超出后省略


实现：父容器设

			
		

	





	

		

			

				
					
flex布局宽度自适应

				
			

			

				

					09-07
				

			

		

		

			
				
要实现flex布局宽度自适应，可以使用flex属性来实现。在引用中的示例中，通过设置`.box`的`display: flex;`属性，使其成为一个flex容器，然后设置`.left`和`.right`的宽度为固定值，如100px，再设置`.right`的`flex: 1;`属性，表示右侧元素会自动占据剩余的可用空间。这样就实现了左侧固定，右侧自适应的布局效果。同样，引用中的示例是实现两侧固定，中间自适应的布局效果。在`.box`中设置`display: flex;`属性，然后通过设置`.left`和`.right`的宽度为固定值，如100px，并在`.center`中设置`flex: 1;`属性，使其自动占据剩余的可用空间。这样就实现了两侧固定，中间自适应的布局效果。如果想要实现左侧文字可以根据文字长短自动调整宽度，并在一行显示不下时省略溢出，可以使用`flex-shrink`属性来控制元素的收缩比例。当左侧文字过长时，设置`flex-shrink: 1;`可以使其收缩，而右侧文字则不受影响，保持完整显示。同理，当右侧文字过长时，设置`flex-shrink: 1;`可以使左侧文字完整显示，而右侧文字省略溢出。这样就实现了左侧文字根据长度自动调整宽度，并溢出省略的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值