问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css3 flex布局的问题

头像
THIS
    765396198

    图片描述

    我想要完成这样的布局 用flex，我的意思是 不要在css里面设置margin或者 padding 和 nth 什么的 有没有大神研究过？

    javascripthtmlhtml5node.js
    阅读 5.1k
    10 个回答
    得票最新
    头像
    john4047
      18444378

      不就是栅格化喽~现在的ui框架都有

      头像
      小戍五
        842

        可以用flex等比局部，不需要用margin和padding

        头像
        joy钰
          9k53031

          那这样

          ul {
  display:flex;
  flex-wrap: wrap;
}
li {
  width: 25%;
}
          头像
          陈欢喜
            9822445
            头像
            kikong
              19.1k21320
              <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .container{
            position: absolute;
            left:100px;
            top:100px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            width: 500px;
        }
        .child{
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border:1px solid #cccccc;
            box-sizing: border-box;
            width: calc(100% * 0.2);
            height: 100px;
            flex-shrink: 0;
            flex-grow: 0;
        }
        .child::before{
            content: '';
            display: block;
            width: 50px;
            height: 50px;
            background-color: green;

        }

        .child.place-holder::before{
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child place-holder"></div>
        <div class="child place-holder"></div>
        <div class="child place-holder"></div>
    </div>
</body>
</html>
              头像
              T_one
                1.3k41431

                这样：

                            ul{
                display: flex;
                display: -webkit-flex;
                flex-wrap: wrap;
                justify-content: space-between;    
            }
            li{
                width: 20%;
                height: 200px;
            }
                头像
                月影
                  2.7k1724
                  头像
                  FANCY
                    413

                    下面是list的样式

                    width: 25%;
                    float: left;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    头像
                    dolphinfine
                      7516
                      ul {
  display:flex;
  flex-wrap: wrap;
}
li {
  flex-basis: 25%;
  display:flex;
  justify-content: center;
}
                      头像
                      小WY
                        1293916
                        ul{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
li{
    width:25%;
    height:（具体高度，包含空白）;
    text-align:center;
}
                        撰写回答
                        你尚未登录，登录后可以
                        • 和开发者交流问题的细节
                        • 关注并接收问题和回答的更新提醒
                        • 参与内容的编辑和改进，让解决方法与时俱进
                        推荐问题
                        宣传栏