理解flexbox（一）

标签：理解   序列   ges   显示   自动   开始   reverse   nbsp   布局   

flexbox是什么

     根据规范中的描述可知道，flexbox模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调用和分配元素和空间两者之间的关系。

如何开始使用flexbox

     开始使用flexbox时，你所要做的第一件事情就是声明一个flex容器。比如：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

      这是一个无序列表ul,里面有三个列表元素li。ul为父元素，li为子元素。要开始使用flexbox，必须先让父元素变成一个flex容器。可以在父元素中显示的设置display：flex或者display:inline-flex。这样就可以开始使用flexbox模块了。

     为以上html添加基本样式，如下:

ul{
  display:flex; 
}

li{
  width:100px;
  height:100px;
  background:red;
  margin:10px;  
}

效果如下：

   一旦显式的设置了display属性的值为flex，无序列表ul就会自动变成flex容器，而其子元素（在本例中是指列表元素li）就变成了flex项目。

关键字：

• flex容器：父元素显式设置了display:flex
• flex项目：flex容器内的子元素

flex容器属性

flex-direction  ||  flex-wrap || flex-flow || justify-content || align-items || align-content

flex-direction

控制flex项目沿着主轴（水平方向）的排列方向，有四个值

row || column || row-reverse || column-reverse:分别是行，列，行的反方向，列的反方向，其中row是默认值。

理解flexbox（一）

标签：理解   序列   ges   显示   自动   开始   reverse   nbsp   布局   

原文地址：http://www.cnblogs.com/yddlvo/p/6832154.html