flex 布局：实现一行固定个数，超出强制换行（流式布局）-Toy模板网

这篇具有很好参考价值的文章主要介绍了flex 布局：实现一行固定个数，超出强制换行（流式布局）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、flex 布局基础知识

flex 布局的知识想必不用多说，一些常用的属性如下：

设置在父容器上的属性：display：flex， align-items, justify-content, flex-wrap。

设置在子容器上的属性，通过 flex: 1，简写了 flex-grow、flex-shrink、flex-basis 三个属性。

基础知识部分可参考阮大的：

二、flex 布局常用应用

1、垂直居中

通过 align-item s 实现不同数据块的垂直居中

2、一行固定行数，超出强制换行

flex布局,设置一行显示个数,下班一小时打卡,每日复习,前端,css,前端,javascript

布局样式如上图所示，这是我们在日常需求开发中常见的一个需求， flex 布局实现起来比较简单。

代码如下：

-- html
<div class="card_wrap">
	 <div class="c_item"></div>
     <div class="c_item"></div>
     <div class="c_item"></div>
     <div class="c_item"></div>
     <div class="c_item"></div>
     <div class="c_item"></div>
     <div class="c_item"></div>
     <div class="c_item"></div>
</div>

---css
.card_wrap { // 大盒子
  width: 98%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; // 替代原先的space-between布局方式
}
.c_item { // 每个item
    flex: 1;
    height: 120px;
    margin: 0 5px 5px 0; // 间隙为5px
    background-color: #999;
    width: calc((100% - 10px) / 3);  // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
    min-width: calc((100% - 10px) / 3); // 加入这两个后每个item的宽度就生效了
    max-width: calc((100% - 10px) / 3); // 加入这两个后每个item的宽度就生效了
    &:nth-child(3n) { // 去除第3n个的margin-right
      margin-right: 0;
    }
 }

引用自：flex布局: 一行显示固定个数,强制换行且均匀分布(超出的分布靠左)_Enidchan_的博客-CSDN博客

上述是方法 1，方法 2：

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

这一实现方法引用自： Flex 布局教程：实例篇 - 阮一峰的网络日志文章来源地址https://www.toymoban.com/news/detail-796065.html

到了这里，关于flex 布局：实现一行固定个数，超出强制换行（流式布局）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！