flex布局,每行放三个,分散对齐

这篇具有很好参考价值的文章主要介绍了flex布局,每行放三个,分散对齐。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

flex布局,每行放三个,分散对齐
flex布局一行3个,javascript,css,前端文章来源地址https://www.toymoban.com/news/detail-632782.html

.commodityBox{//父容器
    display: flex;
    flex-wrap: wrap;
}
.box{//子容器
    width: 32%;
    height: 150px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}
.box:not(:nth-child(3n)) {
    margin-right: calc(6% / 3);
}

到了这里,关于flex布局,每行放三个,分散对齐的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

    需求 : 制作如下搜索栏 ; 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; 然后 , 设置固定定位盒子垂直方向位置 , 设置为 top: 0; 紧贴顶部 ; 再后 , 设置 left: 50% 样式 , 将盒子左侧设置到中心位置 , 这个 50% 是相对于父容器的 比

    2024年02月05日
    浏览(57)
  • CSS - 完美解决 flex 布局下,一行显示固定个数(平均分布)并且强制换行,超出后 “靠左“ 对其(详细解决方案,适用于 Web、Vue、React 等任何前端项目)

    关于 flex 布局下 justify-content: xx,很多朋友都想让其换行后,靠左进行依次排列(默认会平均分布居中)。 本文实现了 纯 CSS (无任何 JS),实现 flex / justify-content 弹性布局下,断行后让元素始终靠左排序, 你可以一键复制示例,然后稍微改改样式就能使用。 如下图所示,

    2024年02月03日
    浏览(45)
  • flex布局优化(两端对齐,从左至右)

    flex布局是前端常用的布局方式之一,但在使用过程中,我们总是感觉不太方便,因为日常开发中,大多数时候,我们想要的效果是这样的 即左右两端对齐并顶满,小盒子左右间距一致,并且从左至右排布。 今天主要就来讨论,通过css,有几种方式来实现,以及它们的优缺点

    2024年01月16日
    浏览(34)
  • flex布局瀑布流占位两边对齐不对称

    2024年02月11日
    浏览(39)
  • flex 布局 一行两个 超出自动换行

    2024年02月12日
    浏览(43)
  • flex 布局:实现一行固定个数,超出强制换行(流式布局)

    flex 布局的知识想必不用多说,一些常用的属性如下: 设置在父容器上的属性:display:flex, align-items, justify-content, flex-wrap。 设置在子容器上的属性,通过 flex: 1, 简写了 flex-grow、flex-shrink、flex-basis 三个属性。 基础知识部分可参考阮大的: 1、垂直居中 通过 align-item s 实现

    2024年01月17日
    浏览(40)
  • 解决flex布局中justify-content设置成space-between后因数据问题导致最后一行布局错乱

    在常用的flex布局中,当页面展示商品时,因为数据的不确定,导致justify-content设置成space-between,最后一行布局错乱   解决办法就是在小盒子后面添加标签 i 或者span标签,然后不设置高度,宽度和小盒子.box 下的div宽度一样就可以 问题来了设置几个呢,答案是设置该行的n-

    2023年04月16日
    浏览(40)
  • CSS---flex布局

    主要记录flex布局的要点以及实例 flex包含6个属性,分别为:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。 row表示按照行正序排列 row-reverse表示按照行反序排列 column表示按照列正序排列 column-reverse表示按照列反序排列 nowrap为默认值,默认不换行 wrap表示

    2024年02月09日
    浏览(45)
  • CSS Flex布局

    Flex布局(弹性盒子布局) 是一种用于在容器中进行灵活和自适应布局的CSS布局模型。通过使用Flex布局,可以更方便地实现各种不同尺寸和比例的布局,使元素在容器内自动调整空间分配。 目录 容器属性 🍁display属性 🍁flex-direction属性 🍁flex-wrap属性 🍁flex-flow属性 🍁jus

    2024年02月10日
    浏览(53)
  • CSS-Flex布局

    Flex布局是一种弹性盒子布局,适用于构建响应式的页面布局 Flex布局是一种弹性盒子布局,适用于构建响应式的页面布局。以下是一些Flex布局的技巧: 使用flex属性设置弹性容器的布局方式,常见的取值有row(水平排列)、column(垂直排列)、row-reverse和column-reverse等。 例如

    2024年01月16日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包