New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

使用flex布局，实现子盒子之间的间隔固定，子盒子可以随着父盒子的大小进行调整 #135

Open

TieMuZhen opened this issue Mar 19, 2022 · 0 comments

Labels

CSS

Owner

TieMuZhen commented Mar 19, 2022

实现子盒子在父盒子中间隔相等的排列，就是每个子盒子的间隔是固定的，盒子的大小是可以根据父元素的大小进行调整的。效果图如下：

父元素设置的代码

display: flex;
flex-wrap: nowrap;
justify-content: space-between;

子元素设置的代码（是每个子元素都需要设置）

width: calc((100% - 92px) / 5); //我需要五个盒子显示就`/5`，减的大小需要自己调整，`92px`是留的n个间隙的宽度总和
height: calc((100% - 136px)); //高度的话也是根据自己需要进行调整

参考文献

使用flex布局，实现子盒子之间的间隔固定，子盒子可以随着父盒子的大小进行调整

The text was updated successfully, but these errors were encountered:

TieMuZhen added the CSS label

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment