在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 請(qǐng)問如何將最后這兩個(gè)跟塊跟左邊對(duì)齊

請(qǐng)問如何將最后這兩個(gè)跟塊跟左邊對(duì)齊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
            min-width: 60%;
            max-width: 80%;
            height: auto;
            justify-content: center;
            flex-wrap: wrap;
            margin: auto;
        }
        .after{
            width: 300px;
            height: 200px;
            border-radius: 5px;
            background: #ffffff;
            margin: 10px;
            transition: all 0.5s;
            box-shadow: 0px 10px 30px #cfcfcf;
            align-self: left;
        }
        .after:hover{
            cursor: pointer;
            transform: translateY(-10px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
    </div>
</body>
</html>

圖片描述

各位大神好，我補(bǔ)充一點(diǎn)，可能問題沒說太明白，我想要的是，container里面的項(xiàng)目左對(duì)齊，在不定義container具體寬度值得情況下，使container居中對(duì)齊，從而讓container里面的項(xiàng)目看起來相對(duì)屏幕是居中對(duì)齊的

回答
編輯回答
茍活

.after{
float:left;
}

2017年9月30日 20:08
編輯回答
維她命

.container {
margin: 0 auto;
把你的justify-content去掉
}

2018年5月8日 11:34
編輯回答
真難過

justify-content: flex-start;

2018年5月19日 07:43
編輯回答
孤客

因?yàn)?code> justify-content的默認(rèn)值就是flex-start ，所以刪掉 .container 下的 justify-content: center;，或者更改為 justify-content: flex-start; 兩種方法都可以。

// 第一種方法：刪掉
.container {
    display: flex;
    min-width: 60%;
    max-width: 80%;
    height: auto;
    /* justify-content: center; */
    flex-wrap: wrap;
    margin: auto;
}

// 第二種：更改為justify-content: flex-start;
.container {
    display: flex;
    min-width: 60%;
    max-width: 80%;
    height: auto;
    justify-content: flex-start; /* 變化部分 */ 
    flex-wrap: wrap;
    margin: auto;
}

基本概念

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。

它可能取5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。

flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

clipboard.png

最后多說一句：建議您將Flex系統(tǒng)的看一下，強(qiáng)烈推薦阮老師的文章，阮老師的文章還是比較通俗易懂的。

阮一峰的網(wǎng)絡(luò)日志Flex 布局教程：語法篇
阮一峰的網(wǎng)絡(luò)日志Flex 布局教程：實(shí)例篇

這是我做的demo：

clipboard.png

代碼：實(shí)現(xiàn)思路添加幾個(gè)空item，您也可以自行尋找更好的方式?。?/p> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            min-width: 60%;
            max-width: 80%;
            height: auto;
            justify-content: space-between;
            flex-wrap: wrap;
            margin: auto;
        }

        .after{
            width: 300px;
            height: 200px;
            border-radius: 5px; 
            background: #ffffff;
            margin: 10px;
            transition: all 0.5s;
            box-shadow: 0px 10px 30px #cfcfcf;
            align-self: left;
        }
        .after-empty {
          width: 300px;
          height: 0px;
          border-radius: 5px; 
          background: #ffffff;
          margin: 10px;
          transition: all 0.5s;
          box-shadow: 0px 10px 30px #cfcfcf;
          align-self: left;
        }
        .after:hover {
            cursor: pointer;
            transform: translateY(-10px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after"></div>
        <div class="after-empty"></div>
        <div class="after-empty"></div>
        <div class="after-empty"></div>
        <div class="after-empty"></div>
        <div class="after-empty"></div>
        <div class="after-empty"></div>
        <div class="after-empty"></div>
    </div>
</body>
</html>

參考地址：flex 最后一行左對(duì)齊

2017年5月22日 11:13
編輯回答
離觴
.container {
  justify-content: flex-start;
}

關(guān)于 Flex，建議好好看下這篇博客 A Complete Guide to Flexbox。

2018年4月7日 06:35