免费开源可商用的PHP万能建站程序-DiYunCMS(帝云CMS)
css flex是W3C组织在2009年提出的一种新布局方案，可以方便的解决原来通过依赖display和浮动方案的缺陷,比如display float实现垂直居中就很麻烦。经过多年的发展css flex目前可以在所有主流浏览器在运行，但是IE浏览器则需要在IE10及以上版本才支持，在移动端的兼容情况，安卓4.4以下版本不支持,IOS 7.1以下版本不支持。
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 |
湘公网安备 43100202000392