Question

我必须在每行中重复span次，并且父div的大小已修复。

A B C D
E F G H
I J K L

如果最后一行中的span少于四个，那么div应该看起来像这样 -

A B C D
E F G H
I J K L
M N

A B C D
E F G H
I J K L
M N O

当前我正在使用链接中的代码获取此输出 -

A B C D
E F G H
I J K L
M     N

A B C D
E F G H
I J K L
M  N  O

我正在使用flex。使用justify-content: center;无效。以下是我正在做的事情http://jsfiddle.net/h8to34ux/341/

angular.module('app', [])

.controller('FrameController', ['$injector', function($injector) {
  var vm = this;
  vm.alphabets =['a','b','c','d','e','f','g','h','i','j']

}]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

.flex{
  width: 400px;
  flex:1;
  display: flex;
  flex-wrap: wrap;
  background-color: green;
  justify-content: space-between;
}
.flex-item{
  width:90px;
  background-color: red;
  text-align: center;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="body">
  <div ng-controller="FrameController as vm">
    <div class='flex'>
      <span ng-repeat='alphabet in vm.alphabets' class='flex-item'>{{alphabet}}</span>
    </div>
  </div>
</div>

Answer 1

我将你的CSS更改为

.flex{
  width: 400px;
  display: block;
  float:left;
  background-color: green;
}
.flex-item{
  width:25%;
  background-color: red;
  float:left;
  text-align: center;
  margin-bottom: 10px;
}

希望它有助于http://jsfiddle.net/h8to34ux/347/

排在最后一排

1 个答案: