flexboxを使用しフッターの左端と右端に要素を固定したい

footer部分を作成中なのですが、ロゴを左端に固定、縦並びのメニューを右端に固定したいと考えています。
そこでコードを以下のようにしました。

html

 <div id ="fotter">
     <div class="info">
       <p>LOGO</p>
         <ul>
           <li class="A">会社概要</li>
           <li class="B">展開</li>
           <li>お問い合わせ</li>
         </ul>
     </div>
  </div>

css

.info {
  padding: 40px 40px;
}

.info > p{
   display: flex;
  font-size: 32px;
  justify-content: flex-start;
}

.info > ul {
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}

これだと、ロゴとメニューがどちらも左端によってしまい、

flex-direction: column;

を削除するとメニューが横並びになってしまいます。
このような場合どうやって解決したらよいでしょうか？

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

回答1件

ベストアンサー

flexコンテナとflexアイテムの関係が理解できていないのでは。
親要素に flex を設定し子要素（アイテム）を横並びにします。
また、justify-content も親要素(コンテナ)に設定して子要素（アイテム）配置方法を設定します。
アイテムを両端に配置する（真ん中に空白を持ってくる）には、
justify-content:space-between;と設定します。

css
1.info {
2  display: flex;
3  padding: 40px 40px;
4  justify-content:space-between;
5}
6
7.info > p{
8  font-size: 32px;
9}
10
11.info > ul {
12 display: flex;
13 flex-direction: column;
14}