Каков наилучший способ указать "выровнять" для элемента сетки в материале пользовательского интерфейса? - PullRequest
Новая
       5

Каков наилучший способ указать "выровнять" для элемента сетки в материале пользовательского интерфейса?

0 голосов
/ 02 февраля 2019

У меня есть простая Сетка из библиотеки material-UI.Это выглядит так: 

<Grid container>
    <Grid item sm={6}>
        <SearchPanel/>
    </Grid>
    <Grid item sm={6}>
        <ItemStatusFilter/>
    </Grid>
</Grid>

Я просто не могу понять, как я могу выровнять первый элемент сетки по центру, а второй, например, по правой стороне?

UPD: я мог бы сделать это с justify-content: flex-end!important в моих CSS файлах, но я не уверен, что это лучший способ.

1 Ответ

0 голосов
/ 02 февраля 2019

Один из способов выглядит примерно так: 

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

import Grid from "@material-ui/core/Grid";

function App() {
  return (
    <Grid container>
      <Grid item xs={4}>
        {/* Intentionally Empty */}
      </Grid>
      <Grid container item xs={4} justify="center">
        <div>Search Panel</div>
      </Grid>
      <Grid container item xs={4} justify="flex-end">
        <div>Item Status Filter</div>
      </Grid>
    </Grid>
  );
}

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

Это общая идея комментария Дункана.Я изменил sm на xs, чтобы проверить поведение на экране любого размера.В конце концов, пользовательский интерфейс Material-UI Grid просто добавляет удобство к модели *1000* CSS Flexbox , поэтому, чтобы знать, как это сделать с Grid, вам нужно понять, каксделать это в CSS.* * * * * * * * * * * * * * * * * * * * * * * * * * * * Grid Главное, что добавляет *1012*, - это легко реагирующие аспекты управления сеткой из 12 столбцов по-разному для экранов разных размеров.

Edit y25382q6r1

...