またまたCSS(flexについて)

Question

皆様お疲れ様です。毎回毎回貴重なアドバイス有難うございます。

あれから、色々とCSSプロパティを学習し、要素(ブロック)の右寄せや左寄せ、揃え方など、
なんとなくわかってきました。

<footer>内にあるメニュー(#fNav)を横並びにした途端に、その下にある(#copyright)が そのまま上に上がってきてしまい、footer内の一番下に寄せる(揃える)ことができません。 無理やりですが、以下の様にTOPをpaddingしてやれば出来ますが、ちょっと無理矢理感があり かっこ悪いですね。。。

なにか他の方法はありますでしょうか？

#copyright{
  display: block;
  padding-top: 80px;
}

<CSS適用前>

<CSS適用後>

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

          <address id="address">
            〒111-111<br>
            東京都新宿区●●●1-1-1 タワー60F<br>
            TEL：[phone]<br>
            FAX：[phone]<br>
            MAIL：[e-mail]
          </address>
        </div>

        <div id="footer-right">
          <nav id="fNav">
            <ul>
              <li><a href="index1.html">ホーム</a></li>
              <li><a href="business1.html">事業内容</a></li>
              <li><a href="About1.html">会社概要</a></li>
              <li><a href="contact.html">お問い合わせ</a></li>
            </ul>
          </nav>

          <small id="copyright">
            Copyright (C) sample株式会社
            ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■
          </small>
        </div>
      </footer>

footer{
  border: solid 0.5px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex; /* 横並びに */
}

#footer-left{
  width: 300px;
}

footer-right{
  width: 600px;
  /*flex:1 1 auto;*/
}

#fNav{
  border: solid 0.5px;
}

#fNav ul{
  display: flex;
　justify-content: flex-end;
}

#fNav li{
  list-style-type: none;
  padding-left: 10px;
}

#copyright{
  display: block;
}

アドバイスいただきました通り、上記CSSのfooter-right内を修正してみましたが、
右に余計なスペースができてしまいました。。。

とにかく、何をやっても上手く行かないです。。。
今日も1日これだけで終わるのかと思うと・・・もう、ノイローゼになりそうです。。。
アドバイス宜しくお願い致します。

宜しくお願い致します。

---

皆様アドバイス有難うございます。アドバイスを基に自分なりに色々調べてみましたが、
取り敢えず、強引な状態ですが、以下の様にしたら目的を達成できました。

footer{
	border: solid 0.5px;
	padding-top: 10px;
	padding-bottom: 10px;
	display: flex;
	width: 900px;
}

#footer-left{
	width: 300px;
}

#footer-right{
	border: solid 0.5px;
	width: 600px;
	display: flex;
flex-direction: column;
	
	
}

#fNav{

}

#fNav ul{
	display: flex;
	justify-content: flex-end;
}


#fNav li{
	list-style-type: none;
	padding-left: 10px;
}


#copyright{
	display: block;
	text-align: right;
	padding-top: 60px; /*無理やり下へ*/
}

まだまだ、要素の配置方法についてはアドバイスを頂きたいことが多々ありますが、
一旦、解決とさせていただきます。

Answer 1

サンプル

#footer-right{ // #が抜けていた
  width: 600px;
  display: flex; // 右側全体をFlexボックスにする
  flex-direction: column; // 上下にする
  justify-content: space-between; //両端に配置
}

これで問題ないはずです。

---

footerの子要素をこんなふうにすると、左が広がります。

#footer-left{
  width: 300px;
  flex: 1;
}

Comments

[退会済みユーザー]

回答有難うございます。
#footer-right内でも、さらにdisplay:flex;をする必要があるんですね。。。

[退会済みユーザー]

でも、#footer-right内の要素が右端に揃わない。。。。

[KugaNaoyuki]

flexコンテナの子要素にflex:1;を足すと、それ以外が端によってくれますよ。

Answer 2

上記質問内容の水平線以下をご確認下さい。

Answer 3

難しい。
<small id="copyright">があるところの親要素の

<div id="footer-right">に下寄せする｢align-items: flex-end;｣を加えるとメニューまで下がってしまう。 だから、別の方法で調べました。 まず、 ``` #footer-right{}にある「width: 600px;」を#fNav{}の中に移して、 #footer-right{}に「height: 60px;」を追加します。 ```

そうするとコピーライターがメニューの下に置き換わります。

それから、

#copyright{}の中にある｢display: block;｣を｢display: flex;｣に修正します。
更に｢justify-content:flex-end;｣と｢flex-flow: column;で下寄せするようにしています。
左側のボックスの高さに合わせて｢height:90px;｣にしています。

それをまとめますと、下記のcssになります。

footer{
  border: solid 0.5px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex; /* 横並びに */
}

#footer-left{
  width: 300px;
}

#footer-right{ /* 先頭の｢#｣が抜けていますので、付け加えてください */
  height: 60px;
}

#fNav{
  width: 600px;
  border: solid 0.5px;
}

#fNav ul{
  display: flex;
  justify-content: flex-end;
}

#fNav li{
  list-style-type: none;
  padding-left: 10px;
}

#copyright{
  display: flex;
  justify-content:flex-end;
  flex-flow: column;
  height:90px;
}

Comments

[amaryllis]

解決済みになっていますが、質問者の希望通りのレイアウトにしてみたけど、参考なされましたでしょうか？

https://thimbleprojects.org/yoyama1208/386281

Answer 4

flexに関しては使わないのでわからないのですがこれだけでいいのでは？
ボックス右下寄せ（widthはあってもいいのですが幅が足りてない？）

#footer-right{
  margin:auto 0 0 auto;
  /*width: 600px;
  flex:1 1 auto;*/
}

Answer 5

footer に align-items: flex-end; を追加。

動くサンプル：https://jsfiddle.net/oas7op5v/

---

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

Comments

[kei344]

ああ、#copyrightだけを下ですね。勘違いしていました。

[kei344]

> もう、ノイローゼになりそうです。。。
楽しめないならやめればよいです。CSSはプログラマーによっては「とても難しい」といわれる方もおられます。入門書を何冊か買って読んで試してそれでも辛いなら外注するほうが良いです。楽しく生きましょう。

https://jsfiddle.net/oas7op5v/2/