flexBox 平均宽度

1.Web

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    html, body, h1, h2, h3, h4, h5, h6, p, img, ol, ul, li, form, table, tr, th, td {
        border: 0;
        border-collapse: collapse;
        border-spacing: 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .contain {
        display: flex;
        flex-direction: row;
        background:#ffff00;
    }
    .item {
        flex: 1;
        height:100px;
    }
</style>
</head>
<body>
<div class="contain">
    <div class="item" style="background-color:red">box1</div>
    <div class="item" style="background-color:green">box2</div>
    <div class="item" style="background-color:blue">box3</div>
</div>
</body>
</html>

Web （代码改）

html

<div class="contain">
    <div class="item item1">box1</div>
    <div class="item item2">box2</div>
    <div class="item item3">box3</div>
</div>

样式

    .contain {
        display: flex;
        flex-direction: row;
        background:#ffff00;
    }
    .item {
        flex: 1;
        height:100px;
    }
    .item1 {
        background-color: red;
    }
    .item2 {
        background-color: green;
    }
    .item3 {
        background-color: blue;
    }

D7C73EFA-5E56-4FA1-BF65-85E46A28C6

2.React Native

type Props = {};
export default class SchedulePage extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
            <SafeAreaView>
                <View style={styles.contain}>
                    <View style={{flex:1,height:100,backgroundColor:'#00ffff'}}><Text>box1</Text></View>
                    <View style={{flex:1,height:100,backgroundColor:'#ff00ff'}}><Text>box2</Text></View>
                    <View style={{flex:1,height:100,backgroundColor:'#ffff00'}}><Text>box3</Text></View>
                </View>
            </SafeAreaView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#ffffff',
    },
    contain: {
        backgroundColor: '#fff000',
        display: 'flex',
        flexDirection: 'row',
    },
});

3D405F77-1DEA-41AD-8493-351EFB9174EB

修改一下样式：

container: {
    flex: 1,
    backgroundColor: '#ffffff',
},

DE3BA777-3246-4FC9-8DAE-0A71F8B0ED85

React Native （代码改）

<View style={styles.container}>
<SafeAreaView>
    <View style={styles.contain}>
        <View style={[styles.item,styles.item1]}><Text>box1</Text></View>
        <View style={[styles.item,styles.item2]}><Text>box2</Text></View>
        <View style={[styles.item,styles.item3]}><Text>box3</Text></View>
    </View>
</SafeAreaView>
</View>

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
    contain: {
        backgroundColor: '#fff000',
        display: 'flex',
        flexDirection: 'row',
    },
    item: {
        flex:1,height:100,
    },
    item1: {
        backgroundColor:'#00ffff'
    },
    item2: {
        backgroundColor:'#ff00ff'
    },
    item3: {
        backgroundColor:'#ffff00'
    },
});

3.微信小程序

index.wxml

<view class="contain">
  <view class="item" style="background-color:red">box1</view>
  <view class="item" style="background-color:green">box2</view>
  <view class="item" style="background-color:blue">box3</view>
</view>

index.wxss

.contain{
  display: flex;
  flex-direction: row;
}
.item {
  height: 100px;
  flex: 1;
}

微信小程序（代码改）

index.wxml

<view class="contain">
  <view class="item item1">box1</view>
  <view class="item item2">box2</view>
  <view class="item item3">box3</view>
</view>

index.wxss

.contain{
  display: flex;
  flex-direction: row;
}
.item {
  height: 100px;
  flex: 1;
}
.item1 {
  background-color: red;
}
.item2 {
  background-color: green;
}
.item3 {
  background-color: blue;
}

3C58C8F5-CDEE-4060-A564-BEBE89325B72