divで囲んだ部分が縦に並ばない

###前提・実現したいこと
divのitemsクラスで囲んだ部分が縦に並ばない。
col-xs-8とcol-xs-4を使い画面を８：４に分けてその４の部分に画像を縦に並べたい。

###発生している問題・エラーメッセージ
htmlに

<div class="items col-xs-4">
                        <div class="flex-item"><a href="https://wwwwwwwwww" target="_blank" rel="nofollow">
<img border="0" width="250" height="250" alt="" src="https://yyyyyyyyyyy"></a>
<img border="0" width="1" height="1" src="https://wwweeeeeeeee" alt=""></div>
                    </div>
                 
                    <div class="items col-xs-4">
                        <div class="flex-item"><a href="https://zzzzzzzzzzzzzzzzzzzzz" target="_blank" rel="nofollow">
<img border="0" width="350" height="240" alt="" src="https://wwwxxxxxxxxxxxxxx"></a>
<img border="0" width="1" height="1" src="https://wwwqqqqqqqqqq" alt=""></div>
                    </div>
                 
                    <div class="items col-xs-4">
                        <div class="flex-item"><a href="https://qqqqqqqqqqqqq" target="_blank" rel="nofollow">
<img border="0" width="300" height="250" alt="" src="https://wwwllllllllllll"></a>
<img border="0" width="1" height="1" src="https://wwweeeeeeeeeee" alt=""></div>
                    </div>

と書いたitemsクラスを縦に並べたい。しかし、今は横に並んでいる。

###該当のソースコード
html全体には

{% load static%}
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'detail.css' %}">
    <link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">

    <title>WEB SITE</title>
</head>

<body class="relative">
{% include '../header.html' %}

    <main>
        <div class="container">
            <div class="detailimg col-xs-8">
                <div class="relative_ele">
                    <img class="absolute-fill" src="{% static 'accounts/detail.jpg' %}" width="500px" height="300px" alt="詳細" />

                    <div class="absolute-fill vertical-center-container">
                        <p class="hthree">XOXO</p>
                            <p class="hthree_small">I LOVE YOU<br>I MISS YOU</p>
                    </div>
　　　　　　　　　</div>


                <a class="button-primary" href="send">SEND</a>
                <a class="button-primary" href="see">SEE</a>
                <a class="button-primary" href="know">KNOW</a>
            </div>

                  <div class="items col-xs-4">
                        <div class="flex-item"><a href="https://wwwwwwwwww" target="_blank" rel="nofollow">
<img border="0" width="250" height="250" alt="" src="https://yyyyyyyyyyy"></a>
<img border="0" width="1" height="1" src="https://wwweeeeeeeee" alt=""></div>
                    </div>
                 
                    <div class="items col-xs-4">
                        <div class="flex-item"><a href="https://zzzzzzzzzzzzzzzzzzzzz" target="_blank" rel="nofollow">
<img border="0" width="350" height="240" alt="" src="https://wwwxxxxxxxxxxxxxx"></a>
<img border="0" width="1" height="1" src="https://wwwqqqqqqqqqq" alt=""></div>
                    </div>
                 
                    <div class="items col-xs-4">
                        <div class="flex-item"><a href="https://qqqqqqqqqqqqq" target="_blank" rel="nofollow">
<img border="0" width="300" height="250" alt="" src="https://wwwllllllllllll"></a>
<img border="0" width="1" height="1" src="https://wwweeeeeeeeeee" alt=""></div>
                    </div>

        </div>
    </main>

    <footer>
      <div class="footers">
        <ul class="bottom-menu">
              <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約とプライバシポリシー</a></li>
        </ul>
      </div>
  </footer>
</body>

</html>

cssには

* {
    margin: 0;
    padding: 0;
}


ul {
    display: flex;
}

.flex-item {
    width: 100%;
}

.half-width {
    width: 50%;
}

.title {
    color: white;
    font-size: 70px;
    align-self: center;
}

.top-menu-item{
    list-style: none;
    font-size: 17px;
}


main {
    display: flex;
}

main div.detailimg {
    margin: 30px;
}

.white-letter {
    color: white;
}

.right-position {
    width: 100%;
}

.float-left {
    float: left;
}

.btn btn-primary btn-lg {
    background-color: black;
}

.outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.items{
    display: flex;
    width:400px;
    height:300px;
    align-items: flex-start;
}

.flex-item{
   flex-flow: column nowrap;
   margin: 20px 30px;
}


.relative_ele{
    position: relative;
    height:300px
}
.absolute-fill {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

.vertical-center-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.hthree {
    color: white;
    font-size: 30px;
    padding-top:70px;
    padding-left:8px;
    font-weight: bold;
}

.hthree_small {
    color: white;
    font-size: 20px;
    padding-left:30px;
    margin-top:0px;
    margin-left:0px;
}

.button-primary {
    display: inline-block;
    width: 300px;
    height: 45px;
    font-size: 20px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 0px;
    margin: 10px 0px;
    border-radius: 6px;
}

footer{
 height: 50px;
 width: 100%;
 background-color: black;
 position:absolute;
 bottom:0;
}

.footers{
 background-color: pink;
 position:absolute;
 bottom:0;
}

.relative {
 position: relative;
}

.bottom-menu-item{
    list-style: none;
    font-size: 15px;
}
.bottom_index {
    color: white;
    padding-left: 30px;
}

と書いた。

###試したこと
CSSのitemsに
align-items: flex-start;　の代わりに
justify-content: flex-start;　・　justify-content: flex-end;
と指定したがitemsの要素は縦に並ばなかった。

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、質問者さんの実現したいことは以下のように行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
6    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css" rel="stylesheet">
7    <title>タイトル</title>
8    <style type="text/css">
9        img {
10            width: 100%;
11            height: auto;
12        }
13
14        .col-xs-8 {
15            width: calc(66.66666667% - 60px);
16        }
17
18        main, ul {
19            display: flex;
20        }
21
22        .detailimg {
23            margin: 30px;
24        }
25
26        .items {
27            display: flex;
28            /*width: 400px;*/
29            /*height: 300px;*/
30            align-items: flex-start;
31        }
32
33        .flex-item {
34            margin: 20px 30px;
35            flex-flow: column nowrap;
36        }
37
38        .relative_ele {
39            position: relative;
40            height: 300px;
41        }
42
43        .absolute-fill {
44            position: absolute;
45            top: 0;
46            right: 0;
47            bottom: 0;
48            left: 0;
49        }
50
51        .vertical-center-container {
52            display: flex;
53            flex-direction: column;
54            justify-content: space-around;
55        }
56
57        .hthree {
58            font-size: 30px;
59            font-weight: bold;
60            padding-top: 70px;
61            padding-left: 8px;
62            color: white;
63        }
64
65        .hthree_small {
66            font-size: 20px;
67            margin-top: 0;
68            margin-left: 0;
69            padding-left: 30px;
70            color: white;
71        }
72
73        .button-primary {
74            font-size: 20px;
75            display: inline-block;
76            /*width: 300px;*/
77            width: 100%;
78            height: 45px;
79            margin: 10px 0;
80            padding: 5px 0;
81            text-align: center;
82            color: white;
83            border-radius: 6px;
84            background-color: black;
85        }
86
87        footer {
88            position: absolute;
89            bottom: 0;
90            width: 100%;
91            height: 50px;
92            background-color: black;
93        }
94
95        .footers {
96            position: absolute;
97            bottom: 0;
98            background-color: pink;
99        }
100
101        .bottom-menu-item {
102            font-size: 15px;
103            list-style: none;
104        }
105
106        .bottom_index {
107            padding-left: 30px;
108            color: white;
109        }
110    </style>
111</head>
112<body>
113<main>
114    <div class="container-fluid">
115        <div class="row">
116            <div class="detailimg col-xs-8">
117                <div class="relative_ele">
118                    <img class="absolute-fill" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=%20"
119                         alt="詳細">
120
121                    <div class="absolute-fill vertical-center-container">
122                        <p class="hthree">XOXO</p>
123                        <p class="hthree_small">I LOVE YOU<br>I MISS YOU</p>
124                        <a class="button-primary" href="send">SEND</a>
125                        <a class="button-primary" href="see">SEE</a>
126                        <a class="button-primary" href="know">KNOW</a>
127                    </div>
128                </div>
129            </div>
130            <div class="col-xs-4">
131                <div class="items">
132                    <div class="flex-item">
133                        <a href="" target="_blank" rel="nofollow">
134                            <img border="0" width="250" height="250" alt=""
135                                 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2">
136                        </a>
137                        <img border="0" width="1" height="1"
138                             src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3" alt="">
139                    </div>
140                </div>
141                <div class="items">
142                    <div class="flex-item">
143                        <a href="" target="_blank" rel="nofollow">
144                            <img border="0" width="250" height="250" alt=""
145                                 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4">
146                        </a>
147                        <img border="0" width="1" height="1"
148                             src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5" alt="">
149                    </div>
150                </div>
151                <div class="items">
152                    <div class="flex-item">
153                        <a href="" target="_blank" rel="nofollow">
154                            <img border="0" width="250" height="250" alt=""
155                                 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image6">
156                        </a>
157                        <img border="0" width="1" height="1"
158                             src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image7" alt="">
159                    </div>
160                </div>
161            </div>
162        </div>
163    </div>
164</main>
165<footer>
166    <div class="footers">
167        <ul class="bottom-menu">
168            <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約とプライバシポリシー</a></li>
169        </ul>
170    </div>
171</footer>
172<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
173<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
174<script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.selecter.min.js"></script>
175<script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.stepper.min.js"></script>
176</body>
177</html>