应无所住,而生其心
排名
1
文章
860
粉丝
112
评论
163
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

flex布局常见问题

5885人阅读 2019/2/17 21:54 总访问:5194586 评论:0 收藏:0 手机
分类: CSS



flex布局中内容div自适应高度

  1. <div class="content">
  2.     <div class="text-center" style="height:1800px;background:#abcdff;width:500px;">
  3.         新年好
  4.     </div>
  5.     <div class="mydiv" id="rightdiv">
  6.         <div style="width:180px;height:300px;background:#00ff00; flex: auto;">
  7.             hello girl1
  8.         </div>
  9.         <div style="width:180px;height:300px;background:#0abcde;margin-top:30px; flex: auto;">
  10.             hello girl2
  11.         </div>
  12.         <div style="width:180px;height:300px;background:#ccff00;margin-top:30px; flex: auto;">
  13.             hello girl3
  14.         </div>
  15.     </div>
  16. </div>

例如这样去写,mydiv的高度不是自适应他下面的三个div的高度,而是自适应了外层div的高度了,这里就第一个div的1800.

解决这个问题其实也简单就是在mydiv上面在加一层就行了。这样第一级的子div自适应外层的,第二级的就可以自适应内容的高度了。



子div设置固定布局会影响父级的flex布局

同样的道理flex布局的第一级子元素设置了postion:fixed这种布局也是会破坏外层的flex布局的,但是多加一级div就可以解决这种问题了





欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

css弹性盒子,flex布局

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

flex好看的相册

先让大家看看效果图吧:需要引入外来插件:https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magni...

一点flex布局的运用

水平分割:html:&lt;divclass=&quot;flex-container&quot;&gt; &lt;divclass=&quot;flex-item&quot;&gt;flexitem1&lt;/div...

css div水平居 。文字垂直居中 。flex的方式实现div的垂直与水平居中。布局模板

DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样:效果:可以看到这个div已经居中了但是...

uni-app 基础view,flex布局使用

代码如下: &lt;template&gt; &lt;view &gt; &lt;view style=&quot;display: flex;flex-direction:row-reve...

flex布局多行自适应间隔

//父盒子,设置为: .templateItem { width: 100%; text-align: center; display: flex; align-content: fl...

css实现左边div固定宽度,右边div自适应撑满剩下的宽度。左边定宽,左边固定,右边自适应。flex 占剩下的宽度

这是一道面试题,你有多少种办法呢?这里我们假设左边名为 left,宽度为 200 px,右边名为 right。即默认 .left { widt...

flex 每行3个。flex一行显示3个。flex 每行显示4个自适应排列。flex每行固定几个布局。css 格子栏效果,css实现框框效果。模板。小屏下一行显示4个,大屏下一行显示5个

[TOC]效果如下,每行显示3个自适应排列 其实也很简单,只需要设置父元素flex布局,然后设置一下换行排列,flex-wrap: wrap...

flex子元素靠右。flex让某个子元素靠右或靠左显示

以下以块元素的Flex布局为示例:只需要两句代码,轻松搞定! 代码1:在父元素里面加入以下代码:(父盒子加了display: fle...

flex平分宽度。flex宽度自适应,均分宽度

html: &lt;div class=&quot;parent&quot;&gt; &lt;div class=&quot;item&quot;&gt; 测试1 &lt;/div&g...

vue布局模板,前端布局模板,flex布局应用

设计图效果: 代码: &lt;!-- 学习活跃度 --&gt; &lt;template&gt; &lt;div class=&quot;learnActivityContainer&q...

flex布局一行显示多个。flex布局固定显示n个,自适应布局

在前端开发的时候,对页面布局的时候,经常遇到固定的一行显示多个,这个经常遇到,所以我想做个记录,等到下次遇到的时候...

flex flex-gorw不等分的问题

flex flex-gorw不等分的问题今天在练习flex 栅格布局的时候, 明明设置了项目元素都是flex-gorw:1;但是发现有个地方 ,因为...

flex实现一行显示n个数量的布局,不同屏幕宽度下显示不同的数量,自适应一行显示的个数

[TOC]要实现的效果如下: 其实原理也非常简单,父元素主要是主要就是设置一个flex布局,然后flex-wrap设置为需要换行 .app...