css----Flex布局一行图标最右边的居右显示

最新推荐文章于 2024-08-01 20:20:24 发布

weixin_38501752

最新推荐文章于 2024-08-01 20:20:24 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/weixin_38501752/article/details/116064505

版权

本文介绍了在前端开发中遇到的一个布局挑战，即如何让右侧图标居右显示。作者通过尝试和同事的建议，发现使用Flex布局可以有效地解决这个问题。文章详细展示了相关代码，并对Flex布局的优势进行了简单评论，鼓励开发者更多地利用这一强大的布局工具。

摘要由CSDN通过智能技术生成

1.要实现下图效果
在这里插入图片描述

弄了半天，最右边的图标死活不能居右。
最后问了同事，说用display flex，试了试果然可以。
先贴布局代码

              <CCard borderColor="secondary" style={{width: '100%', padding: '5px'}}>
                <div className="small" style={{display: "flex"}}>
                  <div style={{flex: 1, display: 'flex'}}>
                    <div style={{padding: '5px'}}>1</div>
                    <div style={{padding: '5px'}}><CImg style={{width: '20px', height: '20px'}}
                                                        src="project/check-mark.svg"
                    /></div>
                    <div style={{padding: '5px'}}><CImg style={{width: '20px', height: '20px'}}
                                                        src="project/round-red.svg"
                    /></div>
                  </div>
                  <div style={{padding: '5px'}}><CImg style={{width: '20px', height: '20px'}}
                                                      src="project/check-mark.svg"
                  /></div>
                </div>
                <div className="text-value-xl text-center">20.1A</div>
                <div className="small">备用</div>
              </CCard>