[记录] Flex语法教程

242 阅读2分钟

title: Flex语法教程 date: 2017-07-25 22:51:34 tags: css categories: 教程 author: "JiaWei"

网页布局(layout)是 CSS 的一个重点应用。

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
  1. 什么是Flex

Flex是Flexible Box的缩写,意为"弹性芾局”,用来为盒状模型提供最大的炅活性。 任何一个容器都可以指定为Flex布局。任何一个容器都可以指定为Flex布局。 Webkit内核的浏览器,必须加上-webkit前缀。 、div{ display:flex } span{ displayiflex } p{ -webkit-display:flex } '

  1. 属性值

容器的属性 : 1. flex-direction : row | row-reverse | column | column-reverse; 2. flex-wrap : nowrap | wrap | wrap-reverse; 3 flex-flow : flex-direction | | flex-wrap (属性简写) 4. justify-content : flex-start | flex-end | center | space-between | space-around; 5. align-items : flex-start | flex-end | center | baseline | stretch; 6. align-conten : flex-start | flex-end | center | space-between | space-around | stretch;

  1. 项目(子元素)的属性 :
  1. order : number (属性定义项目的排列顺序。数值越小,排列越靠前,默认为0) 2. flex-grow : number (定义项目的放大比例,默认为0 ,即如果存在剰余空间,也不放大。1为放大,2为放大 两倍〉 3. flex-shrink : number (定义了项目的缩小比例,默认为1 ,即如果空间不足,该项目将缩小。0为不缩小) 4. flex-basis : auto|px (属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。〉 5. flex : auto| none (flex-grow, flex-shrink 和 flex-basis的简写,auto (1 1 auto)和 none (0 0 auto)0 ) align-self : auto | flex-start | flex-end | center | baseline | stretch; (项目可以单独设置这个属性覆盖align-itmes的值,auto表示继承父元素的align-items属性,如果没有父元素,则等同于stretch)
  1. 汇总

  2. 参考文档 阮一蜂老师