将 flex 对齐到行的底部答案

【问题标题】：React align flex to bottom of a row将 flex 对齐到行的底部
【发布时间】：2021-05-26 03:21:45
【问题描述】：

背景

我有这个代码，连续 3 个块。由于第二个块，该行的高度为 100px。我希望第三个（钢蓝）块的底部与中间较大块的底部对齐。现在，我只能让方块顶部对齐。

问题

如何让视图与比实际高的行的底部对齐？

到目前为止的代码

import React from 'react';
import { View } from 'react-native';

const JustifyContentBasics = () => {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
};

export default JustifyContentBasics;

https://snack.expo.io/oQXyEEikE

我的尝试

我曾尝试用 div 包裹钢蓝方块，但无济于事。

        <div style={{
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'flex-end'}}>
          <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        </div>

【问题讨论】：

标签： css reactjs react-native flexbox

【解决方案1】：

   import React from 'react';
    import { View } from 'react-native';
    
    const JustifyContentBasics = () => {
        return (
          // Try setting `justifyContent` to `center`.
          // Try setting `flexDirection` to `row`.
          <View style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-between'
          }}>
          <div style={{display:'flex',width: '210px', height: '50px', justifyContent:'space-between'}} >
            <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
            <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
          </div>
          <div style={{display:'flex',width: '50px',height:'100px',justifyContent:'flex-end',alignItems:'flex-end'}}>
            <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
          </div>  
            
          </View>
        );
    };

export default JustifyContentBasics;

【讨论】：

你说得对，我没有查看现场演示。您已经有了明确的答案，但这是我编辑帖子的两个 div 的另一种解决方案
你在 react-native 中使用 div！它适用于网络浏览器，但不适用于移动设备。
我看到问题的所有者正在尝试用 div 进行修改，所以我没有注意这一点，但谢谢！

【解决方案2】：

这是工作示例：Expo Snack

import React from 'react';
import { View } from 'react-native';

const JustifyContentBasics = () => {
  return (
    // Try setting `justifyContent` to `center`.
    // Try setting `flexDirection` to `row`.
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
      }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 100, height: 100, backgroundColor: 'skyblue' }} />
      <View style={{ justifyContent: 'flex-end' }}>
        <View
          style={{
            width: 50,
            height: 50,
            backgroundColor: 'steelblue',
          }}
        />
      </View>
    </View>
  );
};

export default JustifyContentBasics;

【讨论】：