温习flex
Posted kim
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了温习flex相关的知识，希望对你有一定的参考价值。
以一篇简单的flex代码举例，重点在温习flex的命令和其相关的属性和实现的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
width: 400px;
display: flex;
/*display: inline-flex; // 行内元素通过这种方式指定为Flex布局*/
list-style: none;
flex-direction : /*row*/
row-reverse
/*column*/
/*column-reverse*/
;
flex-wrap :
/*nowrap*/
wrap
/*wrap-reverse*/
;
/*-webkit-flex-flow: ;
-moz-flex-flow: ;
-ms-flex-flow: ;
-o-flex-flow: ;*/
/*flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/
justify-content : /*flex-start*/
/*flex-end*/
/*center*/
space-between
/*space-around*/
;
align-items : flex-start
/*flex-end
center
baseline
stretch*/
;
/*align-content:align-content属性定义了容器在侧轴方向上有额外空间时，如何每排布一行，当容器只有一行时，它不起作用，它可能有六个值。flex-start/flex-end/center/stretch/space-between/space-around*/
/*子元素的属性order 排列顺序
flex-grow／ 放大比例
flex-shrink／ 缩小比例
flrc-basis／ 属性定义了在分配多余空间之前，项目占据的主轴空间（main-size）。浏览器根据整个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。也可以写数值，单位px
flex／ flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto)（既可以放大占满空间，也可缩小） 和 none (0 0 auto)（不可放大，也不可缩小）。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
align-self ／align-self属性允许单个项目有与其他项目不一样的侧轴对齐方式，可覆盖align-items属性
*/
}
ul>li{
}
</style>
</head>
<body>
<ul id = "ul">
<li>测试flex1</li>
<li>测试flex2</li>
<li>测试flex3</li>
<li>测试flex4</li>
<li>测试flex5</li>
<li>测试flex6</li>
</ul>
</body>
</html>
相关的属性及其效果文中已有阐述，可以自己copy代码进行验证或实验，如此映像才会深刻。
由于现阶段ie8仍旧占据着一定的市场，具体的可以用其他的方法实现或者css hack来解决，综述flex是一个非常好的属性，个人非常喜欢，对于页面的构成和规范的框架flex是一个相当简洁的实现方式。关于flex的使用心得以后持续更新。
以上是关于温习flex的主要内容，如果未能解决你的问题，请参考以下文章