justify-contentが効かない

###前提・実現したいこと
ruby on railsで教材を参考にしながらサイトを作っています。

###発生している問題・エラーメッセージ
justify-contentが効かない
なぜかjustify-contentを実行しても左右中央になりません。

###該当のソースコード

css
1.sample {
2    width: 800px;
3    margin: 0 auto;
4    display: flex;
5    flex-direction: column;
6
7    justify-content: center;
8}
9
10.sample-contents {
11    width: 400px;
12    text-align: left;
13}

html
1<div class="sample">
2    <div class="sample-contents">
3        <h1>sample</h1>
4        <p class="sample-text">
5            <u class="sample-text">sample</u>
6        <h1>sample</h1>
7        <p class="sample-text">
8            <u class="sample-text">sample</u>
9    </div>
10
11    <div class="sample-contents">
12        <h1>sample</h1>
13        <i class="fa fa-facebook"></i>
14        <i class="fa fa-twitter"></i>
15        <i class="fa fa-instagram"></i>
16    </div>
17</div>

###試したこと
検索した。
しかしそれらしい症状は出てきませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
Ruby on rails
Font awesome

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

回答2件

ベストアンサー

flex-directionプロパティにcolumnを指定すると、justify-contentプロパティ, align-itemsプロパティで揃えられる向きが逆転します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
6    <title>タイトル</title>
7    <style type="text/css">
8        .sample {
9            display: flex;
10            flex-direction: column;
11            width: 800px;
12            margin: 0 auto;
13            align-items: center;
14        }
15
16        .sample-contents {
17            width: 400px;
18            text-align: left;
19        }
20    </style>
21</head>
22<body>
23<div class="sample">
24    <div class="sample-contents">
25        <h1>sample</h1>
26        <p class="sample-text">
27            <u class="sample-text">sample</u>
28        <h1>sample</h1>
29        <p class="sample-text">
30            <u class="sample-text">sample</u>
31    </div>
32
33    <div class="sample-contents">
34        <h1>sample</h1>
35        <i class="fa fa-facebook"></i>
36        <i class="fa fa-twitter"></i>
37        <i class="fa fa-instagram"></i>
38    </div>
39</div>
40</body>
41</html>

投稿2017/12/30 17:22

s8_chu

総合スコア14731

shigas

2017/12/30 17:45

ご回答ありがとうございます！MDN便利ですね。初めて知りました。一つ質問なんですが、flex-directionの記事「https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction」をみているときにcolumnのところに「flex コンテナの main-axis は、block-axis と同じ軸になります」と書いてありました。これが「flexアイテムの並べ方によって～」のところだと思うんですが、block-axisが何かわかりません。調べてみましたが、情報が少なく、もしよろしければ教えていただきたいです。お願いします。

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