如何制作没有网格的 L 型 css 布局？ [复制]

Question

我正在使用 react-native 并且想要制作一个如下图所示的布局，其中两个 div 大小相等，直到右侧结束，然后左侧占据整个容器。我以为我可以在网格中做到这一点，但是 react-native 不支持网格，所以我不能使用它。有没有其他方法可以做到这一点？（对不起，草率的绘画技巧）

这是有问题的代码，一旦希伯来语视图完成，我希望英语视图占据整个宽度。

<ScrollView>
        <View style={styles.textContainer}>
            <View style={{flex: 1}}>
                <Text>
                    {props.english}
                </Text>
            </View>
            <View style={{flex: 1}}>
                <Text>
                    {props.hebrew}
                </Text>
            </View>
        </View>
    </ScrollView>

Answer 1

一个选项是使用 flexbox。

import * as React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{flex: 1}}>
    <View style={{ flexDirection: 'row'}}>
      <View style={{flex:1, backgroundColor: 'red'}}>
      </View>
      <View style={{flex:1, backgroundColor: 'blue'}}>
        <Text>Suspendisse sed consequat mi. Ut commodo felis nec venenatis consectetur. Integer fringilla ipsum at magna iaculis, nec sollicitudin nunc mollis. Fusce eu vehicula nunc. Sed lorem est, viverra quis condimentum vel, volutpat vitae diam. </Text>
      </View>
    </View>
    <View style={{ flexDirection: 'row', flex: 1}}>
      <View style={{flex:1, backgroundColor: 'red'}}>
      </View>
    </View>
    </View>
  );
}

Snack