css - React Native flexbox 行对齐元素

Question

如何在不使用静态宽度的情况下获得这样的布局？

“•”前的文字应左对齐，“•”后的文字应全部内联。为了让它看起来像我使用了静态宽度，但出于显而易见的原因，这并不是很好。

这是 React Native 代码:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    margin: 2,
    borderColor: 'green',
    borderStyle: 'solid',
    borderWidth: 2,
  },
});

const RoleRow = ({ role }) => (
  <View style={styles.container}>
    <Text style={{ width: 55 }}>
      {role.name}
    </Text>
    <Text style={{ marginLeft: 5 }}>
      {` • ${role.person.name} ${role.person.lastName}`}
    </Text>
  </View>
);

Answer 1

这可能会有所帮助。这可能有点奇怪，但您必须将每个元素视为一列而不是一行，但这里是 codepen

HTML

 <div class="cont">
      <div class="role-col">
        <div class="role">Small Role</div>
      </div>
      <div class="name-col">
        <div class="name">Small Name</div>
      </div>
    </div>

SCSS

.cont{
  width:400px;
  height:400px;
  background-color:green;
  display:flex;
  flex-direction:row;

  .role-col,.name-col{
    .role,.name{
      border-top:1px solid black;
      border-bottom:1px solid black;
      margin-top:8px;
    }
  }

  .role-col{
    display:flex;
    flex-direction:column;
    background-color:red;

    .role{
      border-left:1px solid black;
      margin-left:8px;
      padding-right:4px;
    }
  }

  .name-col{
    display:flex;
    flex:1;
    flex-direction:column;

    .name{
      border-right:1px solid black;
      margin-right:8px;
      padding-left:4px;
    }
  }
}

这样做的目的是在 Angular 色和名称的每一列中必须有一个元素。因此，如果您有一个没有 Angular 色的名称或没有名称的 Angular 色，您将必须在列中添加一个空元素，以便 css 可以正确调整它们的大小。如果您有任何问题，请告诉我