。

然而#xff0c;有时我们会发现右侧的Card组件并不能与左侧的栏目对齐#xff0c;尤其是当左侧栏目高度动态变化时。

本文将介绍如何使用…在使用antd进行页面布局时经常会遇到需要将内容区域进行左右分栏并在右侧区域内放置一个或多个Card组件的情况。

然而有时我们会发现右侧的Card组件并不能与左侧的栏目对齐尤其是当左侧栏目高度动态变化时。

本文将介绍如何使用antd的Grid布局和CSS样式来实现Card组件与左侧内容对齐并撑满剩余高度。

问题描述

当我们在一个Row中放置两个Col分别代表左侧内容和右侧内容并在右侧的Col中放置一个Card组件时可能会遇到以下问题

右侧的Card组件高度不足无法与左侧的Col对齐。

当左侧内容高度动态变化时右侧的Card组件高度不会相应调整。

解决方案

2、需要在右侧的Col中使用flex布局来撑开Card组件的高度。

具体做法是为右侧的Col设置display:

column;然后为Card组件所在的Row设置flex:1;display:flex;这样是为了保证该Row可以占据上下的空间再给Card设置flex:1;。

这样Card组件就会自动填充右侧Col的剩余空间。

flex-direction:

Row将会沿着列方向排列.为了让包含Card的Row能够填充整个Col的剩余空间就需要确保其父级Col的flex方向是垂直的。

flex:1;常常用于确保

flex

3、包含Card的Row中如果还有Col也要给该Col加上flex:1;display:flex;每一层都要保证能够填充父级的剩余高度。

4、Row和Col本身就是flex布局还要重新设置flex布局是因为在复杂的布局需求下需要在它们内部再次使用

flex

例如需要把Col设置为一个flex容器保证里面内容的垂直对齐或高度填充。

import

style{{backgroundColor:red}}phello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/pphello/p/Card/Col{/*

*/}Col

style{{display:flex,flexDirection:column}}RowCol

span{24}Card

style{{backgroundColor:pink}}phello/pphello/pphello/pphello/p/Card/Col/Row{/*

给该行要设置flex:1;为了保证该行的内容占据剩余空间再开启flex布局

*/}Row

style{{flex:1,display:flex}}{/*

同Row

style{{flex:1,display:flex}}Card

style{{backgroundColor:blue,flex:1}}phello/pphello/pphello/pphello/p/Card/Col/Row/Col/Row/div)}