react 如何实现div布局
使用 Flexbox 布局
Flexbox 是 React 中实现 div 布局的常用方法。通过设置 display: flex，可以轻松控制子元素的排列方式。
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div>Item 1</div>
<div>Item 2</div>
</div>justifyContent 控制主轴对齐方式，alignItems 控制交叉轴对齐方式。常用值包括 flex-start、center、flex-end 等。
使用 CSS Grid 布局
CSS Grid 适合更复杂的二维布局。通过定义网格容器和网格项来实现精确控制。
<div style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '10px'
}}>
<div>Column 1</div>
<div>Column 2</div>
</div>gridTemplateColumns 定义列宽，1fr 表示等分剩余空间。gap 设置网格间距。
使用内联样式或 CSS 模块
React 支持内联样式和 CSS 模块来定义布局样式。
内联样式示例：
<div style={{ margin: '10px', padding: '20px', border: '1px solid #ccc' }}>
Content
</div>CSS 模块示例：
/* styles.module.css */
.container {
display: flex;
padding: 10px;
}import styles from './styles.module.css';
<div className={styles.container}>
Content
</div>使用第三方库
对于更高级的布局需求，可以考虑使用第三方库如 styled-components 或 Material-UI。
styled-components 示例：
import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
justify-content: space-between;
`;
<Wrapper>
<div>Left</div>
<div>Right</div>
</Wrapper>响应式布局
使用媒体查询实现响应式布局，适应不同屏幕尺寸。
<div style={{
display: 'flex',
flexDirection: window.innerWidth < 768 ? 'column' : 'row'
}}>
<div>Content 1</div>
<div>Content 2</div>
</div>或者使用 CSS 媒体查询：
.container {
flex-direction: row;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}这些方法可以根据具体需求灵活组合使用，实现各种复杂的 div 布局效果。
