时间戳

首页 > 解决方案 > React Native flexbox 行对齐项目

css - React Native flexbox 行对齐项目

问题描述

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

布局

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

这是 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>
);

标签： cssreact-nativeflexbox

解决方案

这可能会有所帮助。这可能有点奇怪，但您必须将每个项目视为一列而不是一行，但这里有一个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;
    }
  }
}

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

推荐阅读