flex布局的右对齐很受限制，应该这么写

谁践踏了优雅 2022-12-09 03:12 116阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70_pic_center]  
方法一：（舍弃了flex的布局方法）

.box { 
            margin: -5px;
    }
     .box .item { 
            width: calc(25% - 10px);
            border-radius: 10px;
            float: left;
            height: 270px;
            margin: 5px;
    }

方法二：（结合了flex和以上方法的综合解决办法）

.cardWrap { 
               flex-wrap: wrap;
               margin: 0px -6px;
               .card { 
                   width: 202px;
                   height: 302px;
                   background: red;
                   margin: 0 4px 27px;
               }
    }

以下为方法二的效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/552ba2861bd643f2834dc8227ff6cef8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/ef6e2d2acbe642eb979aed7f3a0f7925.png

发表评论取消回复

表情：

评论列表（有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

相关简历应该这么写！

很多同学刚开始找工作时，投出去很多简历，但是都石沉大海了，没有后文。之所以简历不通过，往往都是简历不够“好看”。很多大公司HR经常一天要看几百份，甚至上千份简历，基本都是1

深碍√TFBOYSˉ_/ 2023年10月03日 16:03/ 0 赞/ 5 阅读

相关 Flex布局子元素对齐方式

display -------------------- display: flex | inline-flex ; `display`确定是否启用flexb

我就是我/ 2023年07月07日 12:53/ 0 赞/ 18 阅读

相关弹性盒子Flex的最后一项向右对齐

[https://blog.csdn.net/qq\_41507093/article/details/87978176][https_blog.csdn.net_qq_415

Dear 丶/ 2022年12月29日 11:27/ 0 赞/ 128 阅读

相关 flex布局的右对齐很受限制，应该这么写

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

谁践踏了优雅/ 2022年12月09日 03:12/ 0 赞/ 117 阅读

相关 MySQL备份脚本，应该这么写

前言：数据库备份的重要性不言而喻，特别是在生产环境，任何数据的丢失都可能产生严重的后果。所以，无论什么环境，我们都应该有相应的备份策略来定时备份数据库。在 MySQL 中，

忘是亡心i/ 2022年11月27日 07:14/ 0 赞/ 182 阅读

相关 flex布局，均分可换行，左对齐

实现效果 ![在这里插入图片描述][20200806115528879.png] 思路：放大于一排数量的空标签占位。上图其实是这样的，关键点将空标签高度设0，避免

╰半橙微兮°/ 2022年11月24日 14:08/ 0 赞/ 333 阅读

相关 flex列表最后一行靠右对齐

// css .box { width:330px; display: flex; flex-wrap: wrap; j

傷城~/ 2022年11月12日 02:52/ 0 赞/ 173 阅读

相关 flex的布局

![在这里插入图片描述][25c3ee75575a44d5ac9a8e830f67b996.png]![在这里插入图片描述][watermark_type_ZHJvaWRzYW

傷城~/ 2022年09月08日 14:48/ 0 赞/ 202 阅读

相关简历就应该这么写

北京科技大学毕业，计算机专业小硕一枚 12年6月毕业开始接触web前端，就职于百度，在hao123部门做到了前端技术负责人 15年7月从百度离职，加入滴滴，前端技术专家，

痛定思痛。/ 2022年08月23日 08:44/ 0 赞/ 197 阅读

相关 flex布局

flex布局传统布局与flex布局传统布局 flex 弹性布局 flex布局原理 flex布局父项常见属性 f

旧城等待，/ 2021年06月24日 13:58/ 0 赞/ 569 阅读