对齐项目flex端反应原生

Question

我是Flexbox样式的新手。尝试将flexbox中的元素对齐到最右边时，我遇到了问题。我已经编写了以下代码来将图像中的加号与红色框的右角对齐，但它没有按预期工作。请帮我解决这个问题。

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier(textCellIdentifier, forIndexPath: indexPath)

    let row = indexPath.row
    cell.textLabel?.text = swiftBlogs[row]

    return cell
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier(textCellIdentifier, forIndexPath: indexPath)

    let row = indexPath.row
    cell.textLabel?.text = swiftBlogs[row]

    return cell
}


func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return swiftBlogs.count
}


func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 1
}

Answer 1

flex-end跨轴工作并将图标垂直推到末尾（其父级的底部），您可以在代码中看到它不以文本和图像为中心。

为了完成这项工作，您需要display: flex上的container:，在flex: 1;上设置textStyle:，这会占用所有可用空间并将iconStyle:推送到margin-left: auto最右边。

如果iconStyle:可用flex: 1，那么在没有display: flex的情况下会这样做，但您仍然需要container: display: flex }

main_container:也应该有container:，除非自动添加到其他地方（同样适用于div { display: flex; align-items: center; background: lightgray; height: 50px; margin-bottom: 5px } span { padding: 5px; } div.nr1 span:nth-child(2) { flex: 1; } div.nr2 span:nth-child(3) { margin-left: auto; }）

示例代码段

＆＃13;

＆＃13;

<div class="nr1">
  <span>image</span>
  <span>text</span>
  <span>icon</span>
</div>

<div class="nr2">
  <span>image</span>
  <span>text</span>
  <span>icon</span>
</div>

＆＃13;

// console polyfill for emscripted Module
var console = {};

console.log = (function() {

  return function(str) {
    master.postMessage({type: 'log', sentence: str});
  };
}());

＆＃13;

＆＃13;

＆＃13;

Answer 2

这将使它本机地将所有内容正确排列在y轴上。关键是中心元素上的flex:1。

<View style={{flexDirection: 'row', alignItems: 'center'}}> 
  <Image source={{uri: this.props.data.picture}} />
  <Text style={{flex:1}}>{this.props.data.company}</Text>                  
  <Icon name={'plus-circle'} size={20} color={'#003057'} />
</View>