box-flex不均分问题
我想当你上手css3的时候后一定为他的强大而感到震惊,但是震惊之后带来的一定是苦恼,因为他太TM变态了!
我之所以这么说是因为我今天写box-flex的时候遇到了一个可以让我蛋碎的问题~~~
首先,box-flex是干嘛的?
box-flex可以让某个元素的子元素在剩余空间等分!
真的,这个功能太好了!
但是让人恼火,想要喊fuck的是,他有时候居然不等分!
可以试想,一个用来等分的属性实现不了他自身的功能,这是多么搞笑的事~
好吧,以上都是我发的牢骚!接下来进入主题~
box-flex的具体功能是:让某个元素的子元素的空余空间等分!
记住是空余空间等分!
例如
<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
</div>
这个时候给child1和child2加box-flex:1,的确他们是等分的
但是,如果是
<div id="parent">
<div id="child1">测试内容</div>
<div id="child2"></div>
</div>
这个时候给child1和child2加box-flex:1,他们就不等分了,而是他们的空余空间等分(child1比child2更加长,而这个差值正式“测试内容”这几个字的宽度)
我想你现在知道我要表达的是什么了吧!
那么问题来了!挖掘机技术哪家强!fuck!!!不是这句
我们应该这么解决呢?
解决方法:
给child1和child2分别加上width:1%;
就这么简单,OK,搞定了!
接下来我说下我的理解:
这里你给child1和child2添加了宽度,且宽度相同,那么他们的空余空间肯定相同了,而“相同的空余空间”+“相同1%的宽度” = “相同的总体宽度”,所以就等分了
box-flex不均分问题的更多相关文章
- box flex 弹性盒模型(转载)
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- 两个input均分自适应
最近项目中,做到了表格类似的表单 左边是标题,右边是输入框,由于种种和项目相关原因,我们采取了div布局 div label input*2div里面有1个input,有的时候,遇到日期,会有2个in ...
- Flex 布局的教程
前言:以前也经常用flex布局,但是最近看到别人使用的时候,发觉以前自己还是不够理解这个,重新看了一遍http://www.ruanyifeng.com/blog/2015/07/flex-gramm ...
- 聊聊Flexbox布局中的flex的演算法
到目前为止,Flexbox布局应该是目前最流行的布局方式之一了.而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Fle ...
- flex布局实现elment容器布局
一.flex布局是什么 flex布局,意为"弹性布局",是一种响应式的布局方法 采用 Flex 布局的元素,称为 Flex 容器,它的所有子元素自动成为容器成员. 先放上一个ele ...
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...
- Html与CSS布局技巧
一.单列布局 1.水平居中:(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parend元素) 1-1:使用inline-block和text-align实现: .par ...
- 性能是全新的 SEO
作为一个前端project师,那不只就是公开地处理那些美丽的html5, css3 和javascript特效.小而重要的一部分工作就是要让项目朝着代码稳定和代码标准方向进展.设计.信息结构以及后台限 ...
- Ext.js高级组件
第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...
- 移动端base.css
html { color: #333; /*规定主色调,依据业务场景(非必须)*/ background: #F6F6F6; /*规定主背景,依据业务场景(非必须)*/ overflow-y: aut ...
随机推荐
- Android -- 通知栏的使用
1. 效果图
- 【BZOJ3207】花神的嘲讽计划I 可持久化线段树/莫队
看到题目就可以想到hash 然后很自然的联想到可持久化权值线段树 WA:base取了偶数 这道题还可以用莫队做,比线段树快一些 可持久化线段树: #include<bits/stdc++.h&g ...
- VTK GetScalarPointer() and GetScalarComponentAsFloat() not work
I am using VTK 5.10.1 with VS 2010, and the following example does not work on my machine: http://ww ...
- C#面向对象整理
一.里氏转换 (1)子类可以赋值给父类:如果有一个地方需要一个父类作为参数,我们可以给一个子类代替. (2)如果父类装的是子类对象,那么这个父类可以强转为子类对象. 二.值类型跟引用类型区别 1.在内 ...
- 科技来电:不容错过的win10轻度美化攻略
作为微软不择手段采用弹框.限时.警告等方式强推win10的结果, win10市场占有率大增,微软高兴了,可用户苦了,吹洗剪+杀马特般的metro&传统混血开始菜单.鼻青脸肿般的任务栏.单一颜色 ...
- Xilinx SDK Problem Solution in Ubuntu
Problem1: Documention and Example can't open, Xilinx SDK Ubuntu. Step1: Click the Document link o ...
- ajx技术解析以及模拟jQuery封装
1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- PowerDesigner的使用一
首先我们需要创建一个测试数据库,为了简单,我们在这个数据库中只创建一个Student表和一个Major表.其表结构和关系如下所示. 看看怎样用PowerDesigner快速的创建出这个数据库吧. 1. ...
- 在OSX下卸载Xamarin
To uninstall Xamarin Studio, you'll want to run the following commands from a Terminal: sudo rm -rf ...
- free一个无效指针
1. 错误描述: 刚才写了一个删除单链表的结点函数, 参数是 指向链表的指针和链表中指定删除的结点的指针. 当我free这个待删除的结点, 结果报错. 2. 为什么会报错? 我查了查MSDN, ...