flex新的心得
主要是对于flex: 与width: 的心得，先看代码。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer {
display: flex;
width: 600px;
height: 400px;
background-color: #888;
}
.inner1 {
width: 100px;
flex: 1;
/*flex: 1 1 auto;*/
background-color: #222;
}
.inner2 {
/*width: 100px;*/
flex: 1;
background-color: blue;
}
</style> </head>
<body>
<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
</div>
</div>
</body>
两个并列子容器，第一个同时声明了width和flex，结果发现width失效。
为何width没效果，这要从flex的默认值说起。在不设置flex的时候，flex的值是 “flex:initial”(相当于flex:0 1 auto)，而此处设置了flex: 1,那设置了flex后，若在flex缩写省略了flex-basis属性设置，则flex-basis的指定值是“0”，自己理解是flex-basis指定的宽度比width优先级更高，因此宽度变成了0px，剩下的空间根据flex-grow比例分空间大小。若flex-basis的指定值是“auto”，则伸缩基准值的指定值是元素主轴长度属性的值。flex还有个值是“flex:auto”，相当于1 1 auto。还有个值是
flex新的心得的更多相关文章
- flex弹性布局心得
概述 最近做项目用flex重构了一下网页中的布局,顺便学习了一下flex弹性布局,感觉超级强大,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Solved by Flexbo ...
- thinkphp新的心得
1,代码的高度复用 1,js的删除,弹出框都可以用嵌入的js,不用每个页面都写 2,控制器的初始化函数可以实现配置某些变量,比如admin模块的topic控制器的初始化函数可以 $this->o ...
- jquery 选择器 -高级使用 新的 心得
jQuery的each函数: each函数等同于c语言中的for函数: 里面每次循环的 "context 上下文" == 当前的dom ,可以使用this, 也可以使用$(this ...
- flex弹性布局学习笔记
前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...
- jquery validate学习心得
据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...
- EasyUI文档学习心得
概述 jQuery EasyUI 是一组基于jQuery 的UI 插件集合,它可以让开发者在几乎完全不需要CSS以及复杂的JS代码情况下完成美观且功能强大的Web界面. 本文主要说明一些如何利用Eas ...
- Flex学习总结
Flex SDK Flex框架类库.Flex编译环境.调式器.MXML.ActionScript编程语言以及其它工具组成,Flash Builder是其开发环境, Flash Player的工作模 ...
- C#模板设计模式使用和学习心得
模板设计模式: 模版方法模式由一个抽象类和一个(或一组)实现类通过继承结构组成,抽象类中的方法分为三种: 抽象方法:父类中只声明但不加以实现,而是定义好规范,然后由它的子类去实现. 模版方法:由抽象类 ...
- Linux简单编程学习心得
在Linux环境下简单编程学习心得 linux编程过程 在上周的<信息安全设计基础>的课程学习中学习到了在虚拟的linux环境下简单的编程.学习过程中接触到了vim.gcc和gcd在实验楼 ...
随机推荐
- 【Codeforces Round #301 (Div. 2) A】 Combination Lock
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟水题 [代码] #include <bits/stdc++.h> using namespace std; cons ...
- MySql基本的语法（学习笔记)
MySQL语法大全_自己整理的学习笔记 select * from emp; #凝视 #--------------------------- #----命令行连接MySql--------- #启 ...
- flask的使用（一）
1.程序基本的说明 #-*-encoding=utf--*- 从flask中引入类 from flask import Flask ,render_template import config 初始化 ...
- UVA 11039 - Building designing 水题哇~
水题一题,按绝对值排序后扫描一片数组(判断是否异号,我是直接相乘注意中间值越界)即可. 感觉是让我练习sort自定义比较函数的. #include<cstdio> #include< ...
- Android应用性能优化系列视图篇——隐藏在资源图片中的内存杀手
图片加载性能优化永远是Android领域中一个无法绕过的话题,经过数年的发展,涌现了很多成熟的图片加载开源库,比如Fresco.Picasso.UIL等等,使得图片加载不再是一个头疼的问题,并且大幅降 ...
- gvim 窗口最大化启动
此文来源于vimer的程序世界 首先需要 gvimfullscreen.dll 文件 下载gvimfullscreen.dll 下载源码 之后只需要在vimrc中配置如下代码就可以按F11使Vim全 ...
- jquery如何实现点击标题收缩下面的内容
jquery如何实现点击标题收缩下面的内容 一.总结 一句话总结:怎么做复杂前端任务,先把样式(最简单)做出来,然后在写js. 1.如何取jquery集合中的某个索引号的元素? 不是get(),是eq ...
- Spring的任务调度@Scheduled注解——task:scheduler和task:executor的解析
原文地址: https://blog.csdn.net/yx0628/article/details/80873774 一个简单的Spring定时任务的 demo,全部代码见下载地址:https:// ...
- [Recompose] Flatten a Prop using Recompose
Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread ea ...
- [React] Create & Deploy a Universal React App using Zeit Next
In this lesson, we'll use next to create a universal React application with no configuration. We'll ...