flex是什么?

任何容器都可以指定为flex布局:

.box{

display: flex;  /* 行内元素可以使用:inline-flex,webket内核浏览器必须 -webkit-flex */

}

设为flex布局后,子元素的float,clear,vertical-align属性都会失效

概念

属性

属性名称

属性解释

属性值

容器的属性

flex-direction

决定item排列方向

默认row, row-reverse,

column, column-reverse

flex-wrap

排列不下时,item如何换行

默认nowrap, wrap, wrap-reverse

flex-flow

direction和wrap的简写

默认row nowrap

justify-content

item在主轴上的对齐方式

flex-start, flex-end, center,

space-between, space-around

align-items

item在另一轴上的对齐方式

flex-start, flex-end ,center

baseline, stretch

align-content

多根轴线的对齐方式

flex-start, flex-end, center,

space-between, space-around,

stretch

项目的属性

order

决定item的排列顺序

默认0,整数,越小越靠前

flex-grow

当有多余空间时,item的放大比例

默认0,即有多余空间也不放大

flex-shrink

当空间不足时,item的缩小比例

默认1,即空间不足时缩小

flex-basis

项目在主轴上占据的空间

默认auto,长度值(例如100px)

flex

grow、shrink、basis的简写

默认 0  1  auto

align-self

单个item独特的对齐方式

同align-items,以align-self优先

参考:http://www.runoob.com/w3cnote/flex-grammar.html

;

flex (html弹性布局)的更多相关文章

  1. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  2. CSS3:布局display属性的flex(弹性布局)

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  3. Flutter布局----弹性布局 (Flex)

    弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...

  4. css3弹性布局语法全解

    本文介绍css3弹性布局的语法 html布局 <div class="box"> <div class="item">1</div ...

  5. 移动端弹性布局--flex

    目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...

  6. flex弹性布局学习笔记

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

  7. flex弹性布局

    Flex 布局教程:语法篇  原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 作者:  ...

  8. Flex弹性布局在移动设备上的应用

    引文 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想用的元素,但浮动并不 ...

  9. 弹性布局-flex

    浅谈display:flex   display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部 ...

随机推荐

  1. 2017.4.19 慕课网-通过自动回复机器人学习mybatis

    开发前的分析 1.技能前提 JSP JSTL EL JS/JQUERY Servlet JavaBean JDBC(后期再用mybatis,这样体会更深) MYSQL 2.需求分析和模块划分 (1)基 ...

  2. 转:svn 更新指定文件夹

    通常由于创建很多个branch和tag,当我们要去checkout指定tag和branch的时候,会不得不把整个branch/tag目录checkout出来.是不是有点傻??!!! 那么如何有选择ch ...

  3. python可hash 不可hash类型

    不可变类型是可hash #tuple str freezeset 可变类型是不可hash ##list set

  4. GROUP BY和HAVING 以及mysql中常用的日期函数

    一.mysql中的GROUP BY和HAVINGGROUP BY常见的是和聚合函数(SUM,MIN,MAX,COUNT)搭配使用. 比如:SELECT category,SUM(money) AS ` ...

  5. jquery ui widget 源代码分析

    jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.wi ...

  6. Oracle 格式化中文时间

    SELECT TO_CHAR(SYSDATE, 'MM"月"DD"日"') A FROM dual; --注: 当格式字符串当中, 存在 自定义的字符信息的时候 ...

  7. 键盘上所有键位的ascii值

    上次用的时候一直找,这次找到了,收藏起来. 0x1 鼠标左键 0x2 鼠标右键 0x3 CANCEL 键 0x4 鼠标中键 0x8 BACKSPACE 键 0x9 TAB 键 0xC CLEAR 键 ...

  8. 网站拓扑图(来自qq)

  9. oracle经常使用函数(1)

    1.返回与指定的字符相应的十进制数 select ascii('A') A,ascii('z') a,ascii('12') 一打,ascii(' ') kg from dual; 2.返回与指定十进 ...

  10. Python内置函数之range()

    range(stop)range(start,stop[,step]) 返回一个range对象,第三个参数的含义为:间隔的个数. range对象同时也是可迭代对象. >>> isin ...