CSS学习笔记:display:flex

原创 2016年06月01日 11:11:25

注意

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

属性

  1. flex-direction(row | row-reverse | column | column-reverse)
  2. flex-wrap(nowrap | wrap | wrap-reverse)
  3. flex-flow
  4. justify-content(flex-start | flex-end | center | space-between | space-around;)
  5. align-items(flex-start | flex-end | center | baseline | stretch;)
  6. align-content(flex-start | flex-end | center | space-between | space-around | stretch;)

order属性

  1. order: 1 2 顺序、

flex-grow属性 flex-shrink属性

1 flex-grow: 1 2 放大比例
2 flex-shrink: 1 2 缩小 默认都是1

flex-basis属性

项目占据的主轴空间 length> | auto

css3弹性盒子模型 flex与box 菜鸟学习笔记

记录一下学习弹性布局的学习笔记 弹性布局是未来的布局趋势 在移动端弹性布局可施展拳脚...
  • gjc9620
  • gjc9620
  • 2015年06月04日 09:23
  • 826

CSS垂直水平居中,display:flex,布局,文字属性的一些零碎

body的height不可少,如body{height:100%},否则子元素会不认,如果子元素的高直接以百分比写的话,会不显示。因为识别不出来。 宽度则不会,因为浏览器的宽度是固定的,高度会滚,...

css3 display:box box-flex 实现未知高度节点相对父级垂直居中

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前...

再说流性布局 display:flex ,以及看到的其他一些css 细节

流行布局flex的细节1.overflow对a无效,如果一个”a “元素里面容纳了太多的文字,设定overflow:hidden是没有用的,文字还是会溢出。 哪怕设置了display:block, ...

Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + po

Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 ...

CSS--display(flex重点)

display首先得写写flex——-弹性布局flexdiv{display:flex;}设置了flex后 子元素行内元素支持宽高了 子元素的clear,float,vertical-align失效 ...

移动开发CSS3:display:box,box-flex属性

必须给父容器div定义css属性display:box,其子容器才可以进行划分(如果定了display:box则该容器定义为内联元素,使用margin让其居中是无效的,可以在其父元素设置text-al...

QT学习笔记(六):Embedded Linux QT Display Management

Qt for Embedded Linux Display Management When rendering, the default behavior for each Qt for...

初探boost之progress_display库学习笔记

progress_display   用途   progress_display可以在控制台上显示程序的
  • wxwd1
  • wxwd1
  • 2014年07月14日 15:40
  • 1479

flex学习笔记

  • 2017年08月07日 08:58
  • 209KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS学习笔记:display:flex
举报原因:
原因补充:

(最多只允许输入30个字)