主要是对于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: none，相当于0 0 auto。这三个属性只要设定了一个，其余两个就按照默认的1 1 0px进行自动代入。

flex新的心得的更多相关文章

  1. flex弹性布局心得

    概述 最近做项目用flex重构了一下网页中的布局,顺便学习了一下flex弹性布局,感觉超级强大,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Solved by Flexbo ...

  2. thinkphp新的心得

    1,代码的高度复用 1,js的删除,弹出框都可以用嵌入的js,不用每个页面都写 2,控制器的初始化函数可以实现配置某些变量,比如admin模块的topic控制器的初始化函数可以 $this->o ...

  3. jquery 选择器 -高级使用 新的 心得

    jQuery的each函数: each函数等同于c语言中的for函数: 里面每次循环的 "context 上下文" == 当前的dom ,可以使用this, 也可以使用$(this ...

  4. flex弹性布局学习笔记

    前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...

  5. jquery validate学习心得

    据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...

  6. EasyUI文档学习心得

    概述 jQuery EasyUI 是一组基于jQuery 的UI 插件集合,它可以让开发者在几乎完全不需要CSS以及复杂的JS代码情况下完成美观且功能强大的Web界面. 本文主要说明一些如何利用Eas ...

  7. Flex学习总结

    Flex SDK Flex框架类库.Flex编译环境.调式器.MXML.ActionScript编程语言以及其它工具组成,Flash Builder是其开发环境,   Flash Player的工作模 ...

  8. C#模板设计模式使用和学习心得

    模板设计模式: 模版方法模式由一个抽象类和一个(或一组)实现类通过继承结构组成,抽象类中的方法分为三种: 抽象方法:父类中只声明但不加以实现,而是定义好规范,然后由它的子类去实现. 模版方法:由抽象类 ...

  9. Linux简单编程学习心得

    在Linux环境下简单编程学习心得 linux编程过程 在上周的<信息安全设计基础>的课程学习中学习到了在虚拟的linux环境下简单的编程.学习过程中接触到了vim.gcc和gcd在实验楼 ...

随机推荐

  1. 微信支付v2开发(1) 微信支付URL配置

    本文介绍微信支付申请时如何设置授权目录及URL. 在申请微信支付时,第一项就会碰到下图的配置. 下面就对这一设置进行讲解! 一.选择支付类型 目前有两种支付类型 JS API网页支付 Native原生 ...

  2. 如何把别人的原理图和pcb图建立一个完整的工程

    这里是我从网友那里下载的pcb图和原理图 我们怎么通过这两个文件建立一个完整的工程 我们选中pcb图文件,通过下面的操作,就可以导出pcb封装库: 同样的方法,我选中pcb图,然后用下面图的方法,就可 ...

  3. JS面向对象程序设计(OOP:Object Oriented Programming)

    你是如何理解编程语言中的面向对象的? 我们研究JS和使用JS编程本身就是基于面向对象的思想来开发的,JS中的一切内容都可以统称为要研究的“对象”,我们按照功能特点把所有内容划分成“几个大类,还可以基于 ...

  4. 为什么我要选择erlang+go进行server架构(2)

    原创文章,转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 为什么我要选择Erlang呢? 一.erlang特别适合中小团队创业: erl ...

  5. [Nuxt] Load Data from APIs with Nuxt and Vuex

    In a server-rendered application, if you attempt to load data before the page renders and the data f ...

  6. leetcode-combination sum and combination sum II

    Combination sum: Given a set of candidate numbers (C) and a target number (T), find all unique combi ...

  7. js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据

    js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据 一.总结 一句话总结:event的relatedTarget属性和data属性. 1.如何知道你是从哪个元素移动到 ...

  8. HDU 1408 盐水的故事 数学水题

    http://acm.hdu.edu.cn/showproblem.php?pid=1408 题目: 挂盐水的时候,如果滴起来有规律,先是滴一滴,停一下:然后滴二滴,停一下:再滴三滴,停一下...,现 ...

  9. HDU 1215 七夕节 数学题~

    http://acm.hdu.edu.cn/showproblem.php?pid=1215 题目大意: 找对象的题...汗..将你的编号(唯一)的所有因子加起来,所得到的的另一个编号的主人就是你的另 ...

  10. 【u023】最长上升子序列(sequence)

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 非常经典的问题,拿来给大家练手了. 序列 { 1,2,...,n } 的一个子序列是指序列 { i1, ...