antd flex布局

  1. 两端对齐 justify="space-between" 
<Row type="flex" justify="space-between" align="bottom">
      <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
      <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
      <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
      <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
</Row>
两端对齐.png
  1. 两端对齐，中间各项间隔： 设置gutter
<Row gutter={40} type="flex" justify="space-between" align="bottom">
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结
    H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,645评论 0赞 26
  • H5移动端知识点总结
    移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,527评论 0赞 6
  • Flex布局小记
    前端时间在项目中使用了一下Flex布局，闲来无事记录一下 首先以一个骰子做介绍 默认是靠左对齐 骰子居中 骰子靠右...
    Tiny_z阅读 1,647评论 0赞 2
  • CSS笔记--理解flex布局
    一、Flex布局是什么 Flex(Flexible Box的简写)，即“弹性布局”，可以简便、快捷的实现各...
    IHateThinkName阅读 746评论 0赞 0
  • flex布局语法篇
    原文地址：flex布局语法篇 之前写过一篇关于实现元素居中的博文，我们发现每种布局要求都可以运用flex布局实现。...
    薛普定朗谔克阅读 1,497评论 0赞 8