Блог

У меня есть следующий стиль в Calculator.css

 .front {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.calc-wrapper {
  width: 400px;
  height: 600px;
}

.row {
  display: flex;
  text-align: center;
  width: 100%;
}
  

И когда я импортирую его в свой компонент Calculator.jsx :

   import "./css/Calculator.css";
  ...
  render() {
    return (
      <div className="front">
        <div className="calc-wrapper">
          <Input input={this.state.input} />
          <div className="row">
            <Button>4</Button>
            <Button>5</Button>
            <Button>6</Button>
          </div>
        </div>
      </div>
    );
  }
  

Он отображает три кнопки подряд, как и ожидалось:

Теперь я переворачиваю этот компонент в другой, Field.jsx .

Field.css

 .back {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.field-wrapper {
  width: 400px;
  height: 600px;
}

.field-row {
  display: flex;
  width: 100%;
}
  

И используя ту же логику в Field.jsx

 import "./css/Field.css";
...
render() {
    const { items } = this.props;
      return (
       <div className="back">
          <div className="field-wrapper">
            <Output output={this.props} />
            <div className="field-row">
              <Position>{items[0]}</Position>
              <Position>{items[1]}</Position>
              <Position>{items[2]}</Position>
            </div>
        </div>
      );
  }
  

Я отображаю элементы горизонтально…

Позиция.css

 .position-wrapper {
  height: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: lighter;
  font-size: 1.4em;
  background-color: #e0e1e6;
  color: #888888;
  flex: 1;
  outline: 1px solid #888888;
}

.field {
  background-color: #fe9241;
  color: #ffffff;
}
  

Position.jsx

 import React from "react";
import "./css/Position.css";


const isOperator = val => {
  return !isNaN(val) || val === "." || val === "=";
};

export const Position = props => (
  <div
    className={`position-wrapper ${
      isOperator(props.children) ? null : "field"
    }`}
    onClick={() => props.handleClick(props.children)}
  >
    {props.children}
  </div>
);
  

Чего мне не хватает?

Попробуйте добавить свойство: flex-direction:row; к элементу

 .field-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}  

или к элементу

     .back {
      display: flex;
      flex-direction: row;
      justify-content: center;
      text-align: center;
      align-items: center;
      height: 100vh;
      width: 100%;
    }