Как выровнять бары снизу

Question

Я занимаюсь разработкой гистограммы с использованием реакции.

Проблема, с которой я сталкиваюсь, заключается в том, что при заданной высоте столбики растут вниз, а не растут вверх.

Это css код для бара

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

это 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;

Пожалуйста, предоставьте мне исправление, которое я Я должен внести в код свой код, чтобы поместить столбики внизу серых линий и дать мне знать, если потребуется дополнительная информация.

Answer 1

Вам нужно добавить 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>