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

css3 flex布局的问题

john4047

18444378

发布于
2018-01-10

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

小戍五

842

发布于
2018-01-10

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

joy钰

9k53031

发布于
2018-01-10

更新于
2018-01-10

那这样

ul {
  display:flex;
  flex-wrap: wrap;
}
li {
  width: 25%;
}

陈欢喜

9822445

发布于
2018-01-10

个人觉得这篇文章，已经很好的说明flex的一般用法；
http://www.ruanyifeng.com/blo...

kikong

19.1k21320

发布于
2018-01-10

<!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

发布于
2018-01-10

这样：

            ul{
                display: flex;
                display: -webkit-flex;
                flex-wrap: wrap;
                justify-content: space-between;    
            }
            li{
                width: 20%;
                height: 200px;
            }

FANCY

下面是list的样式

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

dolphinfine

7516

发布于
2018-01-11

更新于
2018-01-11

ul {
  display:flex;
  flex-wrap: wrap;
}
li {
  flex-basis: 25%;
  display:flex;
  justify-content: center;
}

小WY

1293916

发布于
2018-01-11

ul{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
li{
    width:25%;
    height:（具体高度，包含空白）;
    text-align:center;
}

css3 flex布局的问题

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何自定义设置虚线边框的样式？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？