阅读 252

拿来叭你,flex九宫格

Talk is cheap, show you the code.

首先,我们利用 displat:flex,可以轻松实现以下布局:

image.png

  <div class="app">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
复制代码
.app {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  width: 300px;
}

.item {
  border: 1px solid lightpink;
  width: 98px;
}
复制代码

这要是改了width,我又得算,又得改代码,这谁扛得住,继续想。flex-basis: 33%,有没有可能解放我的计算器,试试

image.png

.item {
  border: 1px solid lightpink;
  flex-basis: 33%;
}
复制代码

有问题,因为border的原因,box里面的content是98px,所以是98/300=32.6667,看看32%

.item {
  border: 1px solid lightpink;
  flex-basis: 32%;
}
复制代码

image.png

问题也很明显,右侧多了一点间隙,那个0.6666666667%丢了鸭,烦人啊

我的老兄弟,大饼说,没办法了

那我不能认输,我继续看flex的属性

大饼说,grow呢,grow,让他们长大,然后就有下面的尝试

.item {
  border: 1px solid lightcoral;
  flex-grow: 1;
}
复制代码

image.png

flex-grow: 1,如果有剩余空间,会平分给每个item。

但这一行也不是仨啊,搞个球球。

我粗略的试了一把,把每个的宽度设置成30%试试

.app {
  margin-top: 300px;
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  width: 300px;
  background: lightgray;
}

.item {
  border: 1px solid lightcoral;
  flex-grow: 1;
  flex-basis:30%;
}
复制代码

image.png

watch out!!!

有了有了,回头一想,虽然只是30%,但剩余空间因为grow,都长大了,就撑满了,奶思兄嘚

所以,结论你自己下叭,再见👋

文章分类
前端
文章标签