两端对齐

.wrap {
	width: 400px;
	display: flex;/*弹性盒子*/
	justify-content: space-between;/*两端对齐，子元素之间有间隙*/
	flex-flow: row wrap; /*子元素溢出父容器时换行*/
}

span {
	width: 100px;
	background-color: green;
	color: #fff;
	border-radius: 5px;
	margin-top: 10px;
	padding: 10px;
}

<div class="wrap">
        <span>11</span>
        <span>22</span>
        <span>33</span>
        <span>44</span>
        <span>55</span>
</div>

解决方法：追加一个空的子元素

.wrap:after {content: ""; width: 120px; }

居中对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function ()
        {
          
        });
      
    </script>
    <style type="text/css">
        .wrap {
            width: 400px;
            display: flex !important; /*弹性盒子*/
            justify-content: center; /* 居中排列 */
            flex-flow: wrap; /*子元素溢出父容器时换行*/
        }

        span {
            width: 100px;
            background-color: green;
            color: #fff;
            border-radius: 5px;
            margin-top: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <span>11</span>
        <span>22</span>
        <span>33</span>
        <span>44</span>
        <span>55</span>
    </div>

</body>
</html>