在使用antd進行頁面布局時，經(jīng)常會遇到需要將內(nèi)容區(qū)域進行左右分欄，并在右側區(qū)域內(nèi)放置一個或多個Card組件的情況。然而，有時我們會發(fā)現(xiàn)右側的Card組件并不能與左側的欄目對齊，尤其是當左側欄目高度動態(tài)變化時。本文將介紹如何使用antd的Grid布局和CSS樣式來實現(xiàn)Card組件與左側內(nèi)容對齊，并撐滿剩余高度。

1. 問題描述：

當我們在一個Row中放置兩個Col，分別代表左側內(nèi)容和右側內(nèi)容，并在右側的Col中放置一個Card組件時，可能會遇到以下問題：

• 右側的Card組件高度不足，無法與左側的Col對齊。
• 當左側內(nèi)容高度動態(tài)變化時，右側的Card組件高度不會相應調整。

2. 解決方案：

1、確保包含左側內(nèi)容和右側Card的Row具有足夠的高度。

2、需要在右側的Col中使用flex布局來撐開Card組件的高度。具體做法是為右側的Col設置display: flex;和flex-direction: column;，然后為Card組件所在的Row設置flex:1;display:flex;這樣是為了保證該Row可以占據(jù)上下的空間，再給Card設置flex:1;。這樣，Card組件就會自動填充右側Col的剩余空間。

• flex-direction: column;保證父級的直接子元素（兩個 Row）將會沿著列方向排列.為了讓包含Card的Row能夠填充整個Col的剩余空間，就需要確保其父級Col的flex方向是垂直的。
• flex:1;：常常用于確保 flex 容器中的項目能夠均勻地分配容器中的空間，如果你希望 Card 組件或其他任何元素填充其父容器的剩余空間，你可以使用 flex: 1; 來實現(xiàn)這一點。

3、包含Card的Row中如果還有Col，也要給該Col加上flex:1;display:'flex';每一層都要保證能夠填充父級的剩余高度。

4、Row和Col本身就是flex布局，還要重新設置flex布局，是因為在復雜的布局需求下，需要在它們內(nèi)部再次使用 flex 布局來獲得更精細的控制。
例如，需要把Col設置為一個flex容器，保證里面內(nèi)容的垂直對齊或高度填充。

3. 案例

import React, { Component } from 'react'
import {Row,Col,Card} from 'antd'
export default class Index extends Component {render() {return (<div><Row gutter={12}><Col span={12}><Card style={{backgroundColor:'red'}}><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p></Card></Col>{/* 給右側一列的Col開啟flex布局，并垂直分布 */}<Col span={12} style={{display:'flex',flexDirection:'column'}}><Row><Col span={24}><Card style={{backgroundColor:'pink'}}><p>hello</p><p>hello</p><p>hello</p><p>hello</p></Card></Col></Row>{/* 給該行要設置flex:1;為了保證該行的內(nèi)容占據(jù)剩余空間；再開啟flex布局 */}<Row style={{flex:1,display:'flex'}}>{/* 同Row */}<Col span={24} style={{flex:1,display:'flex'}}><Card style={{backgroundColor:'blue',flex:'1'}}><p>hello</p><p>hello</p><p>hello</p><p>hello</p></Card></Col></Row></Col></Row></div>)}
}