鍍金池/ 問答/HTML5  HTML/ css3 flex布局的問題

css3 flex布局的問題

圖片描述

我想要完成這樣的布局 用flex，我的意思是 不要在css里面設(shè)置margin或者 padding 和 nth 什么的 有沒有大神研究過？

回答
編輯回答
尛憇藌

借一步說話

2017年12月12日 11:57
編輯回答
尛曖昧

下面是list的樣式

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

2018年3月22日 01:50
編輯回答
獨特范

不就是柵格化嘍~現(xiàn)在的ui框架都有

2018年1月4日 22:27
編輯回答
心悲涼

個人覺得這篇文章，已經(jīng)很好的說明flex的一般用法；
http://www.ruanyifeng.com/blo...

2017年2月23日 16:49
編輯回答
墨小羽

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

2017年5月7日 15:04
編輯回答
奧特蛋

這樣：

            ul{
                display: flex;
                display: -webkit-flex;
                flex-wrap: wrap;
                justify-content: space-between;    
            }
            li{
                width: 20%;
                height: 200px;
            }
2018年6月11日 13:19
編輯回答
念初

那這樣

ul {
  display:flex;
  flex-wrap: wrap;
}
li {
  width: 25%;
}
2017年3月20日 15:28
編輯回答
拼未來
<!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>
2017年12月23日 03:13
編輯回答
過客
ul {
  display:flex;
  flex-wrap: wrap;
}
li {
  flex-basis: 25%;
  display:flex;
  justify-content: center;
}
2018年6月9日 19:35
編輯回答
朽鹿
ul{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
li{
    width:25%;
    height:（具體高度，包含空白）;
    text-align:center;
}
2018年9月15日 00:17