CSS flex 布局的 item 最后一行不拉伸 All In One

CSS flex 布局的 item 最后一行不拉伸 All In One

body {
  box-sizing: border-box;
  padding: 10vh 10vw;
  margin: 0;
}
.box {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid red;
  background: #ccc;
  height: 400px;
}
.item {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  // flex: 0 1 auto;
  // flex: 1 200px;
  flex: 1 auto;
  // flex-grow: 1;
  // flex-shrink: 1;
  // flex-basis: auto;
  width: 200px;
  height: 50px;
  background: #000;
  color: #0f0;
  border: 1px solid red;
}

https://codepen.io/xgqfrms/pen/BaWPJaj

awesome solution ✅ 🚀 👍 🔥

CSS Grid Layout

body {
  box-sizing: border-box;
  padding: 10vh 10vw;
  margin: 0;
}

.resizable {
  overflow: auto;
  // 必须设置 overflow: auto; 才能 resize 容器 ✅
  cursor: col-resize;
  // cursor: all-resize;
  // cursor: col-resize;
  // cursor: row-resize;
  resize: horizontal;
  // resize: none;
  // resize: both;
  // resize: horizontal;
  // resize: vertical;
  // resize: block;
  // resize: inline;
}

/* 
repeat & auto-fit & minmax & 1fr

*/ 
.box {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  flex-wrap: wrap; 
  border: 1px solid red;
  background: #ccc;
  min-height: 400px;
  // height: 400px;
  // overflow-y: visible;
}
.box-samll {
  min-height: 200px;
  margin-bottom: 30px;
}

// item overflow-x bug ??? ❌

.item {
  box-sizing: border-box;
  // padding: 0 10px;
  padding: 0;
  // margin: 0;
  margin: 0 10px;
  min-width: 200px;
  height: 50px;
  background: #000;
  color: #0f0;
  border: 1px solid red;
  text-align: center;
  line-height: 50px;
}


.item-empty {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  // flex: 0 1 auto;
  // flex: 1 auto;
  width: 200px;
  height: 0;
}

https://www.cnblogs.com/xgqfrms/p/14869484.html

try solutions ???

??? js 获取 flex 行数, height

在数据源之后通过 concat 拼接 n 个空的数据项即可

render() {
        return (
            <div className="app-list">
                {this.props.dataSource.map((item, index) => (
                    <div key={item.id} className="app-block"/>
                )).concat(new Array(3).fill(0).map((_, index) => (<div key={index} className="app-block app-empty-item"/> )))}
            </div>
        );
    }

.app-empty-item{
        cursor: default;
        height: 0;
        margin-top: 0;
        margin-right: 18px;
}

??? css var 获取 flex 行数, height

good solution with css hack ✅ 👍 🚀

DOM padding

      <!-- 填充的数量计算方式：（每行最大宽度 / 每个 item 宽度）- 1 -->
      <div class="item-empty"></div>
      <div class="item-empty"></div>
      <div class="item-empty"></div>

.item-empty {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  // flex: 0 1 auto;
  flex: 1 auto;
  width: 200px;
  height: 0;
}

not too good solution 👎 ✅

// not too good 👎, 有点小 bug
.box:after {
  content: '';
  flex-grow: 14;
  // flex-grow: 1000000000;
}

shit solution 💩

no need js

refs

https://codepen.io/xgqfrms/pen/JYyNYK

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---