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

1. 問題描述：

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

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

2. 解決方案：

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

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

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

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

4、Row和Col本身就是flex布局，還要重新設(shè)置flex布局，是因?yàn)樵趶?fù)雜的布局需求下，需要在它們內(nèi)部再次使用 flex 布局來獲得更精細(xì)的控制。
例如，需要把Col設(shè)置為一個(gè)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>{/* 給右側(cè)一列的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>{/* 給該行要設(shè)置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>)}
}