CSS 要素の寄せ方

Question

HTMLとCSSのの学習をしております。
フッターを作成しているのですが、どうしてもフッター内のメニューとcopyright部分が
右寄せになってくれません。

書籍(ホームページ作成のツボとコツが絶対に分かる本)の通りに何度も書き直し、CSSを一行書いたら保存し動作を確かめているのですが、
この部分だけが、なぜか、本の通りに記載しても、一番右まで動いてくれません。

どなたか、原因、解決策をご教授願います。

以下実際に書いたHTMLとCSSです。

!!

<footer id="footer">
      <div id="footer-left">
        <img src="img/footer_logo.png" alt="画像">
        <address id="address">
          ■■■■■■■■■■■■■■■■■■
          ■■■■■■■■■■■■■■■■■■
        </address>
      </div>

      <div id="footer-light">
        <div id="fNav">
          <ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="business.html">事業内容</a></li>
            <li><a href="about.html">会社概要</a></li>
            <li><a href="contact.html">お問い合わせ</a></li>
          </ul>
        </div>
        <small id="copyright">
          copyright ■■■■■■■■■
        </small>
      </div>
    </footer>

#footer{
  background: #2AA8E5;
  color: #ffffff;
  padding: 25px;
  display: flex;

}

#footer-left{
  width: 300px;

}

#address{
  font-size: 12px;

}

#footer-right{
  width: 600px;


}

#copyright{
  text-align: right;
  display: block; /*右に動かない*/
}

/* ７フッダーナビゲーション */

#fNav{
  margin-bottom: 30px;
  border: solid 1px;
}

#fNav ul{
  display: flex;
  width: 518px;
  margin-left: auto; /*右寄せにならない*/
}

#fNav li{
  text-align: center;
  padding:  0 20px;
}

Comments

[yoshinavi]

CSSの「id="footer"」「id="footer-left"」「id="footer-light"」もご提示してください。より良い回答が得れると思います。

[退会済みユーザー]

id="footer"」「id="footer-left"」「id="footer-light"」を追加致しました。

Answer 1

これだけではなんとも言えません。

ただフッターの部分だけ見ればcopyrightはこれでいいと思いますが、ulにwidthを指定しているのでjustify-contentでflex-endを入れないと右には寄らないでしょう。

本の通りにやってるのか、やりつつ自分のコードを入れてるのか、その本を持ってないのでわかりませんが、ブラウザのデベロッパーツールを使って、他のプロパティ等が影響してないかを調べながらやるとどこのせいで右に寄ってないのかも分かりますので勉強になると思います。

Answer 2

#footer-leftは左寄せに、#footer-rightは右寄せにしたいのでしたら、#footerにjustify-content: space-betweenを指定すればいいです。

ul内でliを右寄せするのは、他の回答者の方々がおっしゃっているようにjustify-content:flex-endを指定すればいいです。

demo(JSFiddle)

関連リソース
CSS3 Flexbox の各プロパティの使い方を詳しく解説

Answer 3

footer#footerも、同様にdisplay:flexが設定されているのでしょうか？
それであれば、footer#footerに
justify-content:space-between;
を指定すればdiv#footer-lightも右によるかと思います。

それと、質問には直接ありませんが、「footer-light」のスペルが間違っているので直しておいたほうが良いかと思います。
恐らくは参考にされている書籍のミスかとも思いますが…。

追記
失礼しました。
他の方も仰る通りfooter#footerに掛けるならflex-endではなくspace-betweenでした。誤った回答をしてしまい失礼しました。