css flex教程

css flex是W3C组织在2009年提出的一种新布局方案,可以方便的解决原来通过依赖display和浮动方案的缺陷,比如display float实现垂直居中就很麻烦。经过多年的发展css flex目前可以在所有主流浏览器在运行,但是IE浏览器则需要在IE10及以上版本才支持,在移动端的兼容情况,安卓4.4以下版本不支持,IOS 7.1以下版本不支持。

flex概念

Flex 是 Flexible Box 的缩写,用来为html盒状模型提供极大的方便性,元素设为 Flex 布局以后,它的所有子元素自动成为容器成员,而子元素的float、clear和vertical-align属性将失效。我们通过以下例子来看css flex的一个最基本布局。

例子

FLEX主轴与交叉轴

FLEX属性,父元素属性

属性名称 说明 可选值
flex-direction 子元素在主轴的排列方向 row | row-reverse | column | column-reverse
flex-wrap 子元素的换行方式 nowrap | wrap | wrap-reverse
flex-flow flex-direction属性和flex-wrap属性的简写形式 默认值为row nowrap
justify-content 子元素在主轴上的对齐方式,当flex-direction为row可以理解成水平对齐方式 flex-start | flex-end | center | space-between | space-around
align-items 子元素在交叉轴上对齐方式,当flex-direction为row可以理解成垂直对齐方式 flex-start | flex-end | center | baseline | stretch
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用 flex-start | flex-end | center | space-between | space-around | stretch

项目的属性, 子元素属性

属性名称 说明
order 子元素的排列顺序。数值越小越靠前,默认为0
flex-grow 子元素的放大比例,即存在剩余空间充足子元素如何放大,默认为0空间充足也不放大
flex-shrink 子元素的缩小比例,即如果空间不足时子元素如何缩小,默认为1空间不足时都将等比例缩小
flex-basis 子元素占的空间,跟width或height属性一样的值(比如50px),默认值为auto
flex flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self 允许单个子元素有与其他元素不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch