Я прочитал список сетки пользовательского интерфейса материала и свойство Flexbox / FlexGrow, которое, как я понимаю, работает правильно, если я не указываю направление. Я пытаюсь настроить сетку с вертикальной ориентацией. Похоже, когда мы присваиваем свойство align-center , ширина не та, что мы указываем. Пример: (стиль)
const styles = () => ({
root: {
flexGrow: 1,
},
paper: {
margin: '10px'
},
textField: {
width: '100%',
marginTop: '10px',
marginLeft: '10px'
},
gridBorder: {
borderColor: 'transparent',
borderWidth: 'thin',
borderStyle: 'dotted',
borderRadius: '12px'
}
});
Метод визуализации:
<div id='registration'>
<Grid container spacing={4} direction='column' className={classes.root}>
<Grid item xl={4} lg={4} xs={12}>
<TextField required label="Email" id='' className={classes.textField} onChange={this.handleChange} />
</Grid>
<Grid item xl={4} lg={4} xs={12}>
<TextField required label="Password" id='' className={classes.textField} onChange={this.handleChange} />
</Grid>
</Grid>
</div>
Это выглядит так: 
. Это кажется правильным, но как только я установил свойство align-items , это выходит за рамки моего понимания. Поэтому, когда я вставляю следующую строку:
<Grid container spacing={4} direction='column' className={classes.root} alignItems='center'>
Это начинает выглядеть так: 
Я читал различные темы здесь, и ни одна из них не говорила о направлении. Может кто-нибудь, пожалуйста, помогите мне понять это? Почему ширина уменьшается, как только я устанавливаю ее в центр? Чего мне не хватает?
Обновление :
Я могу это исправить с помощью обходного пути. Но я действительно хотел бы иметь возможность выровнять его по центру, не используя этот обходной путь. Я добавил поддельную сетку перед исходной сеткой, чтобы она выглядела как в центре Код:
<Grid container direction='row'>
<Grid item xs={1} xl={4} lg={4}>
<Grid container direction='column' className={[classes.root, 'same-row', 'background-test'].join(' ')}>
<Grid item>Fake Grid</Grid>
</Grid>
</Grid>
<Grid item xs={1} xl={4} lg={4}>
<Grid container direction='column' className={[classes.root, 'same-row'].join(' ')}>
<Grid item>
<TextField required label="Email" id='' className={classes.textField} onChange={this.handleChange} />
</Grid>
<Grid item>
<TextField required label="Password" id='' className={classes.textField} onChange={this.handleChange} />
</Grid>
</Grid>
</Grid>
</Grid>
и результат: 
. Но все еще не отвечает на мой вопрос, почему выравнивание по центру уменьшит ширину.