Question

我有一个使用flex-box的双列布局的成分列表。当一个成分足够长以致文本破坏到第二行时，它会导致相邻列中列表项之间的垂直间距变得笨拙。在使用flex-box之前，我尝试使用列表项内联块并将它们浮动。

以下是我网站上的内容：

这是我的代码：

＆＃13;

.field-items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.field-item {
  width: 50%;
  float: left;
}

＆＃13;

<div class="field-items">
  <div class="field-item even">
    8 ounces sugar snap peas, stringed </div>
  <div class="field-item odd">
    12 grape tomatoes, halved </div>
  <div class="field-item even">2 tablespoons sliced almonds</div>
  <div class="field-item odd">2 tablespoons extra-virgin olive, walnut, or almond oil</div>
  <div class="field-item even">
    2 tablespoons fruity vinegar, such as raspberry or pomegranate </div>
  <div class="field-item odd">
    ¼ teaspoon salt </div>
  <div class="field-item even">
    1/8 teaspoon freshly ground pepper </div>
  <div class="field-item odd">
    4 cups packed mixed baby lettuce </div>
  <div class="field-item even">
    ¼ cup snipped fresh chives (½-inch pieces) </div>
  <div class="field-item odd">
    ¼ cup chopped fresh tarragon </div>
</div>

＆＃13;

查看实际操作：https://jsfiddle.net/4t4pd3tt/2/

我的目标是在所有列表元素之间保持均匀间隔。我确定此问题之前已经得到了解答，但我无法在初次搜索中找到我要查找的内容。

Answer 1

我一直处于类似的位置，我尝试用flex执行此操作。我花了很长时间在上面，最终发现没有好办法。我的建议是回到可靠的地方（阅读：尴尬和讨厌）float。

您只需稍微清理一下CSS，就可以将odd元素向左浮动，将even元素向右浮动（或者如果您愿意，可以向其他方向浮动，但是这有点愚蠢，所以我不建议这样做。

.field-item {
  width: 50%;
}

.field-item.odd {
  float: left;
}

.field-item.even {
  float: right;
}

为此，您可以从CSS中删除.field-items中的所有规则。

这里一个显而易见的问题是，您需要继续向odd标记添加even和div类，如果您做错了，这很容易导致错误。

我希望这有帮助！

修改

正如Jonathan Nicol指出的那样，您也可以使用nth-child(odd|even)来实现相同的功能，而无需特定的类（将我的注释重复为多余。

.field-item {
  width: 50%;
}

.field-item:nth-child(odd) {
  float: left;
}

.field-item:nth-child(even) {
  float: right;
}

Answer 2

要使用Flexbox进行工作，您需要使用- (void)controllerWillChangeContent:(NSFetchedResultsController *)controller { // The fetch controller is about to start sending change notifications, so prepare the table view for updates. [_table beginUpdates]; } - (void)controller:(NSFetchedResultsController *)controller didChangeObject:(id)anObject atIndexPath:(NSIndexPath *)indexPath forChangeType:(NSFetchedResultsChangeType)type newIndexPath:(NSIndexPath *)newIndexPath { switch(type) { case NSFetchedResultsChangeInsert: [_table beginUpdates]; [_table insertRowsAtIndexPaths:[NSArray arrayWithObject:newIndexPath] withRowAnimation:UITableViewRowAnimationFade]; [_table endUpdates]; break; case NSFetchedResultsChangeDelete: NSLog(@"delete called"); [_table deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade]; break; case NSFetchedResultsChangeUpdate: // [self configureCell:[_table cellForRowAtIndexPath:indexPath] // atIndexPath:indexPath]; [_table reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic]; NSLog(@"fetched update"); break; case NSFetchedResultsChangeMove: [_table deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade]; [_table insertRowsAtIndexPaths:[NSArray arrayWithObject:newIndexPath] withRowAnimation:UITableViewRowAnimationFade]; break; } } - (void)controller:(NSFetchedResultsController *)controller didChangeSection:(id <NSFetchedResultsSectionInfo>)sectionInfo atIndex:(NSUInteger)sectionIndex forChangeType:(NSFetchedResultsChangeType)type { switch(type) { case NSFetchedResultsChangeInsert: [_table insertSections:[NSIndexSet indexSetWithIndex:sectionIndex] withRowAnimation:UITableViewRowAnimationFade]; break; case NSFetchedResultsChangeDelete: [_table deleteSections:[NSIndexSet indexSetWithIndex:sectionIndex] withRowAnimation:UITableViewRowAnimationFade]; break; case NSFetchedResultsChangeMove: break; case NSFetchedResultsChangeUpdate: break; } } - (void)controllerDidChangeContent:(NSFetchedResultsController *)controller { [_table endUpdates]; } -(UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath { if(_segmentedControl.selectedSegmentIndex == 1) { NSLog(@"index path at editingStyleForRowAtIndexPath %@", indexPath); return UITableViewCellEditingStyleDelete; } return NULL; } - (void)tableView:(UITableView*)tableView didEndEditingRowAtIndexPath:(NSIndexPath *)indexPath { // [super tableView: tableView didEndEditingRowAtIndexPath:indexPath]; if(_segmentedControl.selectedSegmentIndex == 1) { for (UITableViewCell *cell in [_table visibleCells]) { for (UIView *subview in cell.contentView.subviews) [subview.layer removeAllAnimations]; } } } // Override to support editing the table view. - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath { /*Only allow deletion for collection table */ if(_segmentedControl.selectedSegmentIndex == 1) { if (editingStyle == UITableViewCellEditingStyleDelete) { NSLog(@"index path at commitediting style %@", indexPath); CollectedLeaf* collectedLeaf = [collectionFetchedResultsController objectAtIndexPath:indexPath]; LeafletPhotoUploader * leafletPhotoUploader = [[LeafletPhotoUploader alloc] init]; leafletPhotoUploader.collectedLeaf = collectedLeaf; if([LeafletUserRegistration isUserRegistered]) { [leafletPhotoUploader deleteCollectedLeaf:collectedLeaf delegate:self]; } // Delete the managed object for the given index path NSManagedObjectContext *context = [collectionFetchedResultsController managedObjectContext]; [context deleteObject:[collectionFetchedResultsController objectAtIndexPath:indexPath]]; // Save the context. NSError *error; if (![context save:&error]) { NSLog(@"Failed to save to data store: %@", [error localizedDescription]); NSArray* detailedErrors = [[error userInfo] objectForKey:NSDetailedErrorsKey]; if(detailedErrors != nil && [detailedErrors count] > 0) { for(NSError* detailedError in detailedErrors) { NSLog(@" DetailedError: %@", [detailedError userInfo]); } } else { NSLog(@" %@", [error userInfo]); } } } } } // Customize the appearance of table view cells. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"speciesCell"; SpeciesCell* speciesCell = (SpeciesCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier]; [self configureCell:speciesCell atIndexPath:indexPath]; speciesCell.labelCheckMark.backgroundColor = [UIColor blackColor]; return speciesCell; } - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } - (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ id <NSFetchedResultsSectionInfo> sectionInfo = [[collectionFetchedResultsController sections] objectAtIndex:section]; if([sectionInfo numberOfObjects] == 0){ UILabel *noDataLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, tableView.bounds.size.height)]; noDataLabel.text = @"Press the Snap It! tab to start collecting!"; //Start your collection by tapping on the Snap It! tab."; noDataLabel.textColor = [UIColor whiteColor]; noDataLabel.textAlignment = NSTextAlignmentCenter; tableView.backgroundView = noDataLabel; tableView.separatorStyle = UITableViewCellSeparatorStyleNone; } return [sectionInfo numberOfObjects]; }并为Flex容器提供固定的高度。

相反，对于列布局，CSS Columns是正确的方法。

Stack snippet

flex-direction: column

.field-items {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

.field-item {
}

2列列表项之间的间距笨拙

2 个答案:

修改