css3 flex布局的问题

THIS
  • 740

图片描述

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

回复
阅读 3.5k
10 个回答

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

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

joy钰
  • 9k

那这样

ul {
  display:flex;
  flex-wrap: wrap;
}
li {
  width: 25%;
}
<!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>

这样:

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

下面是list的样式

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

dolphinfine
  • 75
ul {
  display:flex;
  flex-wrap: wrap;
}
li {
  flex-basis: 25%;
  display:flex;
  justify-content: center;
}
ul{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
li{
    width:25%;
    height:(具体高度,包含空白);
    text-align:center;
}
宣传栏