CSS выравнивание: проблемы с выравниванием flexbox / попутного ветра - PullRequest
Новая
       97

CSS выравнивание: проблемы с выравниванием flexbox / попутного ветра

0 голосов
/ 29 мая 2020

В настоящее время я использую попутный ветер для выравнивания данных в реакции, я пробовал добавить flexbox, но похоже, что у меня есть несколько вещей

Это мой ожидаемый результат: enter image description here

Мне бы очень хотелось, если бы кто-нибудь также объяснил, что я делаю не так.

Текущий результат: enter image description here

Моя последняя попытка была такой: 

import React from "react";
import ReactDOM from "react-dom";

const SummaryPerPlatform = () => {
  return (
    <div>
      <div className="max-w-md overflow-hidden bg-white m-4">
        <div className="flex flex-col min-h-full">
          <div className="flex flex-col flex-grow">
            <div className="px-6 py-3 border-b">
              <div className="text-xl font-bold"> Twitter </div>
            </div>
            <div className="px-6 py-3 border-b">
              <span className="">Avg. sentigment(0.0 -1.0)</span>
              <span className="">0.31</span>
            </div>
            <div className="px-6 py-3 border-b">
              <div className="text-xl font-bold"> Instagram </div>
              <span className="">Post analyzed</span>
              <span className="">5,670</span>
            </div>
            <div className="px-6 py-3 border-b">
              <div className="text-xl font-bold"> LinkedIn </div>
              <span className="">Positive posts (>0.66)</span>
              <span className="">1,849</span>
            </div>
            <div className="px-6 py-3 border-b">
              <span className="">Negative posts (0.33)</span>
              <span className="">1,981</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default SummaryPerPlatform;

const rootElement = document.getElementById("root");
ReactDOM.render(<SummaryPerPlatform />, rootElement);

Любая помощь очень ценится.

1 Ответ

0 голосов
/ 29 мая 2020

Вы должны использовать flex-row вместо flex-col для всего контейнера. В противном случае я бы предложил использовать дополнительный div для различения этих разделов и использовать Grid , чтобы расположить эти div с одинаковой шириной.

Вы можете попробовать следующее: 

// ...
return (
    <div>
        <div className="max-w-md overflow-hidden bg-white m-4">
            <div className="grid grid-cols-4 gap-1">
                <div>
                    <div className="px-6 py-3 border-b">
                        <div className="text-xl font-bold"> Twitter </div>
                    </div>
                    <div className="px-6 py-3 border-b">
                        <span className="">Avg. sentigment(0.0 -1.0)</span>
                        <span className="">0.31</span>
                    </div>
                </div>
                <div>
                    <div className="px-6 py-3 border-b">
                        <div className="text-xl font-bold"> Instagram </div>
                        <span className="">Post analyzed</span>
                        <span className="">5,670</span>
                    </div>
                </div>
                <div>
                    <div className="px-6 py-3 border-b">
                        <div className="text-xl font-bold"> LinkedIn </div>
                        <span className="">Positive posts (>0.66)</span>
                        <span className="">1,849</span>
                    </div>
                    <div className="px-6 py-3 border-b">
                        <span className="">Negative posts (0.33)</span>
                        <span className="">1,981</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
)
// ...
...