javascript - 如何从底部对齐条

我正在使用react开发条形图。


我面临的问题是，当给定高度时，钢筋向下生长而不是向上生长。

这是栏的CSS代码

.bar{
    width:20px;
    padding: 20px;
    background-color: orange;
    margin-left: 20px;
    margin-top: 105px;
    z-index: 500;
    border-radius: 10px;
    flex-shrink: 0;
}

这是bar的父级的css代码

.nextB{
    height: 350px;
    width: 740px;
    border: 0px solid black;
    z-index: 100;
    overflow: auto;
    margin-left: 265px;
    margin-right: 10px;
    margin-top: -376px;
    display: flex;
    flex-flow: row;
}

这是我的酒吧组件的代码

import React from 'react';
import Classes from './barPart.css';
const barHandler= (props) =>(
    <div className={Classes.bar} style={{height: `${props.height}%`}}>
    </div>
);

export default barHandler;

请提供我必须在代码中进行的更正，以将条形图放置在灰线的下端，并让我知道是否需要更多信息。

最佳答案

您需要添加align-items: flex-end;使其起作用。看看这个例子。

.nextB{
    height: 100px;
    width: 340px;
    border: 0px solid black;
    z-index: 100;
    overflow: auto;
    display: flex;
    flex-flow: row;
    align-items: flex-end;
}

.bar{
    width:20px;
    padding: 20px;
    background-color: orange;
    margin-left: 20px;
    z-index: 500;
    border-radius: 10px;
    flex-shrink: 0;
}

<div class="nextB">
  <div class="bar" style="height:40px"></div>
  <div class="bar" style="height:60px"></div>
  <div class="bar" style="height:20px"></div>
</div>

关于javascript - 如何从底部对齐条，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60702311/