对齐底部的卡片按钮 Material UI
Align Card Buttons on bottom Material UI
我正在用 ReactJS 开发一个应用程序,我正在使用以下内容:MaterialUI(用于 React)和 React Flexbox。
我遇到的问题是试图将卡片按钮放在底部(这个问题似乎在不同的框架中充斥着互联网)。
我正在使用这里的卡 -> https://material-ui.com/demos/cards/
我已经尝试了几乎所有我能想到的方法,从 align-items 到 align-self 和不同的显示类型。我可能在这里遗漏了一些东西,因为我通常与 Bootstrap 一起工作,所以我希望 CSS 大师可以帮助我。我将附上下面的图片以供参考。
此外,这里是我的代码在 React 中的样子(ApiPosts 是我的卡片组件)->
<Grid container>
<Grid item xs={12}>
<Paper className={classes.paper}>
<Row className="rowSpacer">
<Col xs>
<Typography variant="title" align="center" color="textPrimary" gutterBottom>
Posts are below
</Typography>
</Col>
</Row>
<Divider />
<ApiPosts />
</Paper>
</Grid>
</Grid>
最后我的卡片被包裹在 <Row around="xs">
中(连续 4 个帖子)并且每张卡片都在一个列中 <Col xs >
提前致谢!
编辑:多亏了 Ivan 的 answer.Here 代码,以防万一需要它(处理 Material-UI 卡片)。
.portCardCl {
display: flex;
flex-direction: column;
height:100%;
}
.portBodyCl {
display: flex;
flex: 1 0 auto;
align-items: flex-end;
justify-content: center;
flex-direction: column;
}
.portButCl{
display: flex;
justify-content: flex-start;
}
portCardCl
继续第一个 <Card>
,portBodyCl
继续 <CardActionArea>
最后 portButCl
继续 <CardActions>
这里是 css-grid 的例子。
const {
Button,
createMuiTheme,
CssBaseline,
MuiThemeProvider,
Typography,
Paper,
withStyles,
} = window['material-ui'];
const styles = theme => ({
root: {
display: "grid",
gridTemplateColumns: "repeat(4, 1fr)",
gridGap: "24px",
},
card: {
display: "grid",
gridTemplateRows: "1fr auto",
gridGap: "8px",
minHeight: 280,
backgroundImage: `url(https://via.placeholder.com/100x200)`,
backgroundSize: "cover"
},
body: {
alignSelf: "end",
textAlign: "center"
},
actions: {
display: "flex",
justifyContent: "space-between"
}
});
const Grid = withStyles(styles)(
class Grid extends React.Component {
render () {
const { classes } = this.props;
const cards = [1, 2, 3, 4];
return (
<div className={classes.root}>
{cards.map(c => (
<Paper key={c} className={classes.card}>
<div className={classes.body}>
<Typography variant="subheading">
Test Image
</Typography>
<Typography variant="caption">
Small help text
</Typography>
</div>
<div className={classes.actions}>
<Button>Left</Button>
<Button color="primary">Right</Button>
</div>
</Paper>
))}
</div>
)
}
}
)
const theme = createMuiTheme();
ReactDOM.render((
<MuiThemeProvider theme={theme}>
<Grid />
</MuiThemeProvider>
), document.querySelector("#root"))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<div id="root"></div>
这是 flex
仅使用
的卡片示例
.card {
padding: 24px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .13);
background: skyblue;
border-radius: 4px;
font-family: "Helvetica", sans-serif;
display: flex;
flex-direction: column;
height: 280px;
width: 160px;
}
.card__body {
display: flex;
flex: 1 0 auto;
align-items: flex-end;
justify-content: center;
}
.card__actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
}
<div class="card">
<div class="card__body">
Test Text
</div>
<div class="card__actions">
<button>Left</button>
<button>Right</button>
</div>
</div>
我正在用 ReactJS 开发一个应用程序,我正在使用以下内容:MaterialUI(用于 React)和 React Flexbox。
我遇到的问题是试图将卡片按钮放在底部(这个问题似乎在不同的框架中充斥着互联网)。 我正在使用这里的卡 -> https://material-ui.com/demos/cards/
我已经尝试了几乎所有我能想到的方法,从 align-items 到 align-self 和不同的显示类型。我可能在这里遗漏了一些东西,因为我通常与 Bootstrap 一起工作,所以我希望 CSS 大师可以帮助我。我将附上下面的图片以供参考。
此外,这里是我的代码在 React 中的样子(ApiPosts 是我的卡片组件)->
<Grid container>
<Grid item xs={12}>
<Paper className={classes.paper}>
<Row className="rowSpacer">
<Col xs>
<Typography variant="title" align="center" color="textPrimary" gutterBottom>
Posts are below
</Typography>
</Col>
</Row>
<Divider />
<ApiPosts />
</Paper>
</Grid>
</Grid>
最后我的卡片被包裹在 <Row around="xs">
中(连续 4 个帖子)并且每张卡片都在一个列中 <Col xs >
提前致谢!
编辑:多亏了 Ivan 的 answer.Here 代码,以防万一需要它(处理 Material-UI 卡片)。
.portCardCl {
display: flex;
flex-direction: column;
height:100%;
}
.portBodyCl {
display: flex;
flex: 1 0 auto;
align-items: flex-end;
justify-content: center;
flex-direction: column;
}
.portButCl{
display: flex;
justify-content: flex-start;
}
portCardCl
继续第一个 <Card>
,portBodyCl
继续 <CardActionArea>
最后 portButCl
继续 <CardActions>
这里是 css-grid 的例子。
const {
Button,
createMuiTheme,
CssBaseline,
MuiThemeProvider,
Typography,
Paper,
withStyles,
} = window['material-ui'];
const styles = theme => ({
root: {
display: "grid",
gridTemplateColumns: "repeat(4, 1fr)",
gridGap: "24px",
},
card: {
display: "grid",
gridTemplateRows: "1fr auto",
gridGap: "8px",
minHeight: 280,
backgroundImage: `url(https://via.placeholder.com/100x200)`,
backgroundSize: "cover"
},
body: {
alignSelf: "end",
textAlign: "center"
},
actions: {
display: "flex",
justifyContent: "space-between"
}
});
const Grid = withStyles(styles)(
class Grid extends React.Component {
render () {
const { classes } = this.props;
const cards = [1, 2, 3, 4];
return (
<div className={classes.root}>
{cards.map(c => (
<Paper key={c} className={classes.card}>
<div className={classes.body}>
<Typography variant="subheading">
Test Image
</Typography>
<Typography variant="caption">
Small help text
</Typography>
</div>
<div className={classes.actions}>
<Button>Left</Button>
<Button color="primary">Right</Button>
</div>
</Paper>
))}
</div>
)
}
}
)
const theme = createMuiTheme();
ReactDOM.render((
<MuiThemeProvider theme={theme}>
<Grid />
</MuiThemeProvider>
), document.querySelector("#root"))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<div id="root"></div>
这是 flex
仅使用
.card {
padding: 24px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .13);
background: skyblue;
border-radius: 4px;
font-family: "Helvetica", sans-serif;
display: flex;
flex-direction: column;
height: 280px;
width: 160px;
}
.card__body {
display: flex;
flex: 1 0 auto;
align-items: flex-end;
justify-content: center;
}
.card__actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
}
<div class="card">
<div class="card__body">
Test Text
</div>
<div class="card__actions">
<button>Left</button>
<button>Right</button>
</div>
</div>