flex完成子项分组布局

最新推荐文章于 2022-08-16 19:32:34 发布

大杯美式不加糖

最新推荐文章于 2022-08-16 19:32:34 发布

阅读量259

点赞数

分类专栏： CSS 业务技巧文章标签： flex 前端

本文链接：https://blog.csdn.net/qq_40988677/article/details/119721463

版权

业务技巧同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

很多地方都有这种效果：
在这里插入图片描述
可以使用flex布局来完成，但是每个子项又是分组来排列的，如何做？

举个例子，可以试着来完成4个子项的效果，即：
在这里插入图片描述
来看看怎么完成：

<!-- CSS -->
<style>
.main {
      width: 500px;
      height: 500px;
      background-color: skyblue;
      display: flex;
    }
    .main > div {
      width: 50px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      border: 1px solid black;
      background-color: pink;
    }
</style>

<!-- HTML -->
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>

看看目前的效果：
在这里插入图片描述
这时候要让34移动到右边，有一种最简单的方法，就是 margin-right: auto ，来试一试：

.main > div:nth-child(2) {
   margin-right: auto;
}

效果图：
在这里插入图片描述
只想让4在最右边，3在中间呢？

.main > div:nth-child(2) {
  margin-right: auto;
}
.main > div:nth-child(3) {
  margin-right: auto;
}

效果图：
在这里插入图片描述
记住 margin-right: auto 这个神器！

大杯美式不加糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
flex完成子项分组布局

很多地方都有这种效果：可以使用flex布局来完成，但是每个子项又是分组来排列的，如何做？举个例子，可以试着来完成4个子项的效果，即：来看看怎么完成：<style>.main { width: 500px; height: 500px; background-color: skyblue; display: flex; } .main > div { width:
复制链接

扫一扫