css flex 教程
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 |