Flex学习笔记

今日用到css的flex属性，不甚了解，看教程之余觉得阮神写得相当全面，一篇语法，一篇实例，看完也就知道怎么用了。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

将容器指定为Flex布局：

.box{
  display: flex;
}

行内元素也可以使用Flex布局：

.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀：

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

之后，将以下6个属性设置在容器上：

flex-direction 属性决定主轴的方向（即项目的排列方向）
flex-wrap
flex-flow
justify-content
align-items
align-content

将以下6个属性设置在项目上：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

以下是简单实例

<!DOCTYPE html>
<html>
<head>
    <title>flex</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<style type="text/css">
    #box {
    display: -webkit-flex;
    display: flex;    //使用flex布局
    -webkit-flex-direction: row;
    flex-direction: row;   //横排
    flex-wrap: wrap;   //换行
    }

    .item {
    border: 1px solid black;
    -webkit-flex: auto;
    flex: auto;   
    }
</style>

<div id="box">
        <div class="item" >我有一壶酒 </div>
        <div class="item" >足以慰风尘</div>
</div>
</div>
</body>
</html>

显示效果大致是这样的：

我有一壶酒

足以慰风尘

宽度变窄，自动换行：

我有一壶酒

足以慰风尘

以上。