flexboxで要素を右側に置きたい

前提・実現したいこと

ボタンをflexboxを使って右端におきたい
ここに質問の内容を詳しく書いてください。
flexboxでいろいろ試したのですが解決できませんでした。
お手数おかけします
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <link rel="stylesheet" href="stylesheet.css">
7    <link href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" rel="stylesheet">
8  </head>
9  <body>
10    <header>
11      <div class="container">
12        <div class="header-left">
13          <a class="header-logo"><i class="fab fa-airbnb"></i></a>
14          <div class="header-list">
15            <ul>
16              <li>概要</li>
17              <li>準備</li>
18              <li>安全</li>
19              <li>マネープラン</li>
20            </ul>
21          </div>
22        </div>
23
24          <div class="header-right">
25            <button type="button" name="button" class="st-btn"></button>
26          </div>
27      </div>
28    </header>
29  </body>
30</html>

CSS
1header {
2  display: flex;
3  height: 70px;
4}
5
6.container {
7  display: flex;
8}
9
10.header-left {
11  display:flex;
12}
13
14.header-logo {
15  font-size: 2.5rem;
16}
17.header-left ul{
18  display:flex;
19  list-style: none;
20}

試したこと

containerに対してspacebeetweenを試みたり
一回、header-right,leftなどのクラスを外してみて
いろんな人のブログを見て真似てみたのですが
できませんでした。

floatを使えば右端に動かせるのですが
ブログを拝見させていただいた中で
flexboxの方がfloatよりも使いやすいという印象を持ちました。
そのため、flexboxを使用した解決策などはありませんでしょうか。

補足情報（FW/ツールのバージョンなど）

atomを使ってます。

s8_chu

2020/05/05 09:03

質問へ CSS タグを追加していただけませんか？

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

回答2件

flexコンテナに space-between を設定して、幅も 100% に設定します。

css
1.container {
2  display: flex;
3  justify-content: space-between; /*追加*/
4  width: 100%; /*追加*/
5}
6

投稿2020/05/05 09:10

hatena19

総合スコア34075

ベストアンサー

flex コンテナに width プロパティを指定したうえで .header-right クラスに margin-left プロパティを指定することで質問者さんの実現したいことが行えます (動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="utf-8">
6    <title></title>
7    <link rel="stylesheet" href="stylesheet.css">
8    <link href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" rel="stylesheet">
9  </head>
10
11  <body>
12    <header>
13      <div class="container">
14        <div class="header-left">
15          <a class="header-logo"><i class="fab fa-airbnb"></i></a>
16          <div class="header-list">
17            <ul>
18              <li>概要</li>
19              <li>準備</li>
20              <li>安全</li>
21              <li>マネープラン</li>
22            </ul>
23          </div>
24        </div>
25
26        <div class="header-right">
27          <button type="button" name="button" class="st-btn"></button>
28        </div>
29      </div>
30    </header>
31  </body>
32
33</html>

CSS
1header {
2  display: flex;
3  height: 70px;
4}
5
6.container {
7  display: flex;
8  width: 100%;
9}
10
11.header-left {
12  display: flex;
13}
14
15.header-logo {
16  font-size: 2.5rem;
17}
18
19.header-left ul {
20  display: flex;
21  list-style: none;
22}
23
24.header-right {
25  margin-left: auto;
26}