1. 原址:http://www.runoob.com/w3cnote/flex-grammar.html

  容器的属性

  1. 设置Flex布局之后,子元素的float、clear、vertical align将失效。
  2. 任何一个容器都可以指定为flex布局。行内元素也可以使用flex布局,webkit内核的浏览器,必须加上-webkit前缀。
  3. flex-wrap属性默认的是不换行。
  4. flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认是row nowrap。
  5. align-items属性的默认值是stretch:如果项目未设置高度或者为auto,将占满整个容器的高度。(aligin-content的默认属性也是stretch)
  6. align-content属性定义了多跟轴线的对其方式。如果项目只有一根轴线,该属性不起作用。

  项目的属性

  1. order属性定义项目的排列顺序。数值越小排列越靠前默认为0。
  2. flex-grow的属性默认为0,flex-shrink的属性默认为1。它们两个都不能为负。
  3. flex-shrink的值越大,减小的越厉害。如果值为0,表示不减小
  4. flex属性:flex属性是flex-grow、flex-shrink、flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷键——auto(1 1 auto)none(0 0 auto)。建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

flex知识点精炼的更多相关文章

  1. flex知识点归纳

    1.flex-shrink <div id="content"> <div class="box" style="backgroun ...

  2. html5与css3入门知识点精炼

    <meta name = "keywords" content="…………"/>(网页搜索时要输入的关键字) <meta name = &qu ...

  3. 大三仍是Linux系统小白的我给大家讲讲学习历程

    我与Linux结缘是在大三的时候.我与Linux熟识是在偶然遇到<Linux就该这么学>的时候.因为我是电子信息工程专业,在高年级时开设了嵌入式课程,嵌入式系统是一种专用的计算机系统,作为 ...

  4. Java编程思想读书笔记(一)【对象导论】

    2018年1月7日15:45:58 前言 作为学习Java语言的经典之作<Java编程思想>,常常被人提起.虽然这本书出版十年有余,但是内容还是很给力的.很多人说这本书不是很适合初学者,我 ...

  5. flex布局知识点

    flexBox 布局最合适小规模布局,而网格布局适合较大规模布局. float,clear,vertical-align  在flex中不起作用. flex布局中,有两类作用于父节点也子节点的样式,大 ...

  6. Flex 布局知识点梳理

    传统的布局方案,在针对特殊布局时会很不方便,比如垂直居中,把一个容器等分为N列等等.自从 Flex 出现以后,这些都迎刃而解了,本文对Flex相关内容做一个简单梳理. 什么是 Flex Flex 是 ...

  7. flex布局知识点(阮一峰博客)

    任何一个容器都可以指定为flex布局: 行内元素也可以使用flex布局: 设为flex布局以后,子元素的float,clear,vertical-align属性都将失效: flex容器的属性: fle ...

  8. Flex布局兼容知识点总结

    转载,原文http://www.cnblogs.com/tugenhua0707/p/5180841.html,部分截取 假设父容器class为 box,子项目为item.旧版语法如下:一:定义容器的 ...

  9. 弹性盒子布局(display:flex)知识点

    设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效.

随机推荐

  1. PAT_A1108#Finding Average

    Source: PAT A 1108 Finding Average (20 分) Description: The basic task is simple: given N real number ...

  2. html第四节课

    css CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合 ...

  3. 【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享(多文件版本)

    这个版本的JQuery是对上一个版本的JQuery,使用了require.js进行了二次封装,基本上把前面的每一个框架封装成为一个单独的模块,最终的目录结构如下: 由于代码量和目录比较多,这个封装好的 ...

  4. Linux 下的基本命令

    Linux 下的基本命令 1. ls 命令 格式 : ls [OPTION]... [FILE]... 用途 : 显示目录下的内容 [OPTION] : -l : 列出详细信息 -d : 显示目录本身 ...

  5. C#关键字的个人理解与注释

    C#关键字注释:abstract:抽象as:类型转换(返回转换结果)base:基类bool:布尔类型break:条件中断语句byte:字节case:条件语句catch:异常捕获后执行char:16 位 ...

  6. Java基础学习总结(39)——Log4j 1使用教程

    1. 配置文件 Log4J配置文件的基本格式如下: #配置根Logger log4j.rootLogger  =   [ level ]   ,  appenderName1 ,  appenderN ...

  7. Travel Card

    Travel Card time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  8. I - Tunnel Warfare

    I - Tunnel Warfare HDU - 1540 思路:原来以为自己已经完全理解了线段树,现在发现其实还差一些火候,做题的时候太拘泥于格式,思路不是很能放开. #include<cst ...

  9. Spring boot 前后台分离项目 怎么处理spring security 抛出的异常

    最近在开发一个项目 前后台分离的 使用 spring boot + spring security + jwt 实现用户登录权限控制等操作.但是 在用户登录的时候,怎么处理spring  securi ...

  10. 关于BeanShell报错提示Error invoking bsh method

    背景:因测试需要打算从外部引用.java和.class文件,奈何报错挥之不去:Error invoking bsh method: eval...... 各种百度取经之后,决定先抛弃引用,试试Bean ...