align-content：flex-end不将元素转移到容器底部

Question

我有outerWrapper，innerWrapper和孩子。

outerWrapper的高度为300px，且为display: flex。

innerWrapper也是display: flex。

我认为因为它们是flex，innerWrapper会继承outerWrappers高度。

我想将align-content: flex-end添加到outerWrapper。但它不起作用，因为innerWrapper继承了outerWrappers高度。

如何将align-content: flex-end添加到outerWrapper？

或者，如何让innerContents身高与孩子保持同一高度，align-content: flex-end会有效？

这是描述我想要的图像：

我想将innerContent缩小到红线。

更新

我只想澄清一下。我希望innerWrapper以红线结束，而不是开始。

JSFiddle

#outerWrapper {
  height: 300px;
  background-color: lightgreen;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
li {
  list-style-type: none;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid;
}

<div id="outerWrapper">
  <ul id="innerWrapper">
    <li class="child">I'm #01</li>
    <li class="child">I'm #02</li>
    <li class="child">I'm #03</li>
    <li class="child">I'm #04</li>
    <li class="child">I'm #05</li>
  </ul>
</div>

Answer 1

请尝试align-items:flex-end;而不是align-content:flex-end;。

align-content适用于多行柔性框。当项目在一行中时，它不起作用。它根据其价值对齐整个结构。

flex-box的align-items属性垂直对齐flex容器内的项目，就像justify-content对水平轴一样。

Answer 2

使用align-content: flex-end代替align-items: flex-end或与align-content一起使用。

align-content属性仅适用于多行灵活容器。因此，例如，如果您的弹性项目换行，那么align-content将起作用。

在单行Flex容器中，.innerWrapper无效。正如您所提到的，＆＃34; ...它不起作用，因为.outerWrapper继承了align-self的高度＆＃34; 。换句话说，它不起作用，因为单行的交叉大小是容器的交叉大小，不留任何额外的空间。

来自规范：

  

6. Flex Lines

     

在多线柔性容器（即使只有一条线的容器）中，   每行的交叉大小是包含该行所必需的最小大小   弹线上的项目（由于align-content对齐后）和   使用align-content在flex容器中对齐线条   属性。 在单行Flex容器中，行的交叉大小   是flex容器的交叉大小，align-content没有   效果。 一行的主要大小始终与主要大小相同   flex容器的内容框。

     

8.4. Packing Flex Lines: the align-content property

     

justify-content属性对齐Flex容器的行   当横轴有额外的空间时，flex容器，   类似于 import UIKit import Firebase import FirebaseStorage class timelineTableViewController: UITableViewController { var posts = [Post]() var databaseRef: FIRDatabaseReference! var storageRef: FIRStorageReference! override func viewDidLoad() { super.viewDidLoad() databaseRef = FIRDatabase.database().reference() storageRef = FIRStorage.storage().reference() let userPostRef = self.databaseRef.child("posts") userPostRef.queryOrderedByChild("time").observeEventType(.ChildAdded, withBlock: {(snapshot) in if let postAdd = snapshot.value as? NSDictionary{ let url = snapshot.value?["postPhoto"] as! String let userPhotoUrl = snapshot.value?["userPhoto"] as! String let myPost = Post(data: postAdd) FIRStorage.storage().referenceForURL(url).dataWithMaxSize(10 * 1024 * 1024, completion: { (data, error) in let postPhoto = UIImage(data: data!) }) FIRStorage.storage().referenceForURL(userPhotoUrl).dataWithMaxSize(10 * 1024 * 1024, completion: { (data, error) in let userPhoto = UIImage(data: data!) }) self.posts.insert(myPost, atIndex: 0) self.tableView.reloadData() } }) } override func numberOfSectionsInTableView(tableView: UITableView) -> Int { // #warning Incomplete implementation, return the number of sections return 1 } override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return posts.count } override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let cellIdentifier = "postCell" let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath)as! timelineTableViewCell //Dispatch the main thread here dispatch_async(dispatch_get_main_queue()) { cell.usernameLabel.text = self.posts[indexPath.row].username cell.postText.text = self.posts[indexPath.row].postText cell.timeLabel.text = self.posts[indexPath.row].time cell.postPhoto.image = self.posts[indexPath.row].postPhoto cell.userPhoto.image = self.posts[indexPath.row].userPhoto } return cell } } 如何对齐单个项目   主轴。 注意，此属性对单行flex不起作用   容器

     

_{（强调添加）}