flex-boxで交差軸におけるjustify-contentやalign-itemsが反映されません。

Question

前提・実現したいこと

flex-boxにて「クラス.member」の余白や位置調整を交差軸で行いたいです。

フレックスコンテナを覆っている「クラス.special-thanks」の高さいっぱいまで
「クラス.member」を広げたいです。下記は理想のイメージになります。


コチラの白いdivグループを、、　　　下の画像のように配置したいです。

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

flex-direction: column;を指定し、交差軸へ変更させると、justify-contentや
align-itemsが効いているようですが、表示としては変化がなく困っています。



※エラーメッセージ
特にエラーや他におかしい部分もないので、誤字などは考えにくいです。
flex-direction: column;を指定しないとjustify-contentは挙動が確認できるのですが
、align-itemsは効いてくれません。

該当のソースコード

HTMLソースで一部抜粋でございます。

<section class="special-thanks">
      <h1>
        創業メンバー
      </h1>
      <h3>
        実際にフリーランスとして活躍している<br>エンジニアが立ち上げました
      </h3>
      
      <div id="teacher">
        <div class="member">
          <img src="imges/keisuke_someya (2).jpg" alt="染谷 佳佑">
          <name>
            フリーランス講師
          </name>
          <br>
          <name>
            染谷 佳佑
          </name>
          <p>
            ISARA (THAILAND) CO.,LTD.の代表です。学生起業の後にリクルートへ就職、その後独立し、海外移住しました。今はフリーランスとしてリモートワークで日本円を稼ぎ、外国通貨に変えて使い、海外を旅してます。営業、ブログPVアップ(最高月間150万PV)、ビジネス構築が専門です。
          </p>
        </div>
        
        <div class="member">
          <img src="imges/yuki (2).png" alt="成田 雄輝">
          <name>
            フリーランス講師
          </name>
          <br>
          <name>
            成田　雄輝
          </name>
          <p>
            バンコクのシェアハウスのオーナーをやりながら一年の大半をタイで過ごしています。 大学時代から今に至るまでネットだけで生計を立てているので、自由歴だけは講師陣の中で最長です！ 母親がタイ人という事もありタイには精通してますので、こちらでの生活のサポートはお任せください！
          </p>
        </div>
        
        <div class="member">
          <img src="imges/manabu (2).png" alt="坂内 学">
          <name>
            フリーランスエンジニア
          </name>
          <br>
          <name>
            坂内　学
          </name>
          <p>
            アドバイザーとして参画しました。新卒で海外就職して１１ヶ月後に退職。今は日本にいたり海外にいたりでゆるくフリーランスをしています。
          </p>
          <p>
            お仕事はWebマーケティングとプログラミングが専門領域です。
          </p>
        </div>
      </div>
    </section>

**下記当該CSSとなります。**
※一部抜粋になります。
※display:flex;を宣言しているIDにシングルクォーテーションがついていますが、この質問版で表示がおかしくなっていたので意図して付け加えたものでございます。

*/.special-thanks {
  height: 1270px;
  padding: 40px 10px 15px;
  box-sizing: border-box;
  background-image: url(imges/teacherbg.jpg);
  background-position: bottom;
  background-size: cover;
  text-align: center;
}

.special-thanks h1 {
  color: #ffffff;
  font-size: 18px;
  line-height: 20px;
  margin-top: 30px;
}

.special-thanks h3 {
  font-size: 12px;
  color: #ffffff;
  line-height: 20px;
  margin-top: 45px;
}

’#teacher {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.member {
  width: 100%;
  height: 220px;
  padding: 30px 10px 25px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  position: relative;
}

.member img {
  width: 120px;
  height: 120px;
  border-radius: 50px;
  position: absolute;
  left: 50%;
  top: -42%;
  transform: translate(-50%,0%);
}

.member name {
  font-size: 12px;
  font-weight: 300;
  line-height: 26px;
  color: #ffffff;
}

.member p {
  font-size: 12px;
  font-wei 10px;
}/*

試したこと

marginやcontentなどでのフレックスアイテムの挙動は確認できました。
ChromeDEVツールで他の要素やスタイルなどを消して行き、
フレックスコンテナを覆う要素とフレックスコンテナ、フレックスアイテムのみにしても、
動いてくれませんでした。

どうかお力添えをいただけると幸いです。
よろしくお願いいたします。

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

ここにより詳細な情報を記載してください。

Comments

[hatena19]

CSSコードもコードブロック内にいれてください。
HTMLコードと同様に ``` で囲めばOKです。

言葉だけではご希望のレイアウトが把握しづらいので画像をアップロードしてもらうと的確な回答が付きやすくなると思います。

[yambejp]

cssのコメントアウトは/* */で行ってください

[ojakomaru]

閲覧いただきありがとうございます。
上記修正依頼に対して変更を加えました。
よろしくお願いいたします。

Answer 1

レスポンシプ対応にしたいのならまずは、各要素（.special-thanks .member）の高さを固定値にするのはやめましょう。

あとは画像を position: absolute; で上にずらしてますが、その分、.member に上マージンを設定すればいいでしょう。

.special-thanks {
/*  height: 1270px; 削除 */
  padding: 40px 10px 15px;
  box-sizing: border-box;
  background-image: url(imges/teacherbg.jpg);
  background-position: bottom;
  background-size: cover;
  text-align: center;
}

.special-thanks h1 {
  color: #ffffff;
  font-size: 18px;
  line-height: 20px;
  margin-top: 30px;
}

.special-thanks h3 {
  font-size: 12px;
  color: #ffffff;
  line-height: 20px;
  margin-top: 45px;
}

’#teacher {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.member {
  width: 100%;
/*  height: 220px;  削除 */
  padding: 35px 10px 25px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  position: relative;
  margin-top: 110px; /* 追加 */
}

.member img {
  width: 120px;
  height: 120px;
  border-radius: 50%; /* 修正 */
  position: absolute;
  left: 50%;
  top: -42%;
  transform: translate(-50%,0%);
}

.member name {
  font-size: 12px;
  font-weight: 300;
  line-height: 26px;
  color: #ffffff;
}

.member p {
  font-size: 12px;
}