如果行未满，如何证明内容开始答案

【问题标题】：how to justify content start if line is not full如果行未满，如何证明内容开始
【发布时间】：2020-12-02 12:37:29
【问题描述】：

我有带按钮的数组映射。现在我希望容器像现在一样（在中心）但是当新行未满时我希望项目开始（现在它也在中心）我该如何处理？（见下图）

我的组件代码：

const AvailableHours = ({ avHoursInDay }) => {
return (
    <View style={styles.container}>
        {avHoursInDay.map((item, i) => {
            return (
                <TouchableOpacity key={i} style={styles.button} onPress={console.log("s")}>
                    <Text style={styles.text}>{item.time}</Text>
                </TouchableOpacity>
            );
        })}
    </View>
   );
   }  ;

   const styles = StyleSheet.create({
   container: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    borderWidth: 1,
    borderColor: "red",
},
text: {
    color: "white",
    paddingHorizontal: 15,
    paddingVertical: 6,
    fontSize: 16,
    fontFamily: "heebo",
    textAlign: "center",
},
button: {
    margin: 2,
    borderRadius: 12,
    borderWidth: 1,
    backgroundColor: "transparent",
    borderColor: "#d9b310",
},

有问题的图片：

我想要实现的图像：

【问题讨论】：

标签： javascript css react-native

【解决方案1】：

我刚刚修改了你的一些代码，试试看，如果有帮助，请告诉我。

const AvailableHours = ({ avHoursInDay }) => {
return (
    <View style={styles.container}>
        {avHoursInDay.map((item, i) => {
            return (
                <TouchableOpacity key={i} style={styles.button} onPress={console.log("s")}>
                    <Text style={styles.text}>{item.time}</Text>
                </TouchableOpacity>
            );
        })}
    </View>
   );
   }  ;

   const styles = StyleSheet.create({
   container: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "flex-end",
    borderWidth: 1,
    borderColor: "red",
},
text: {
    color: "white",
    paddingHorizontal: 15,
    paddingVertical: 6,
    fontSize: 16,
    fontFamily: "heebo",
    textAlign: "center",
},
button: {
    margin: 2,
    borderRadius: 12,
    borderWidth: 1,
    backgroundColor: "transparent",
    borderColor: "#d9b310",
},

【讨论】：

现在我所有的容器都是从右侧开始的......这不是我要求的

【解决方案2】：

尝试在所需元素上应用align-self: 'flex-start'。

button: {
    margin: 2,
    borderRadius: 12,
    borderWidth: 1,
    backgroundColor: "transparent",
    borderColor: "#d9b310",
    align-self: 'flex-start'
},

【讨论】：