display: flex; 解決できませんか？

Question

前提・実現したいこと

該当のソースコードだと文字が中央揃えになってしまうのですが、左揃えにする方法はありませんでしょうか？

※flex-direction: column;は必要なので外したくありません

該当のソースコード

<div style="display: flex;align-items: center;width:85%;height:100%;text-align:left;float:left;flex-direction: column;">なぜか中央揃えになる</div>

Comments

[Daregada]

何をどう配置したいのか、「明確に」言語化してください。
そのdiv要素の内容には、何を何個入れるのでしょう。

Answer 1

flexレイアウトを使うからには、コンテナー(今回だとstyleを設定しているdiv要素)の内部に、アイテムを複数配置するはずですが、それが一向に明らかにならないな。

<div style="background-color:yellow; display: flex; flex-direction: column; justify-content: center; width: 85%; height: 30%;">
  なぜか中央揃えになる
</div>

Comments

[rtye]

あれ？完璧です。
justify-content: center;は左右中央、
align-items: center;は上下中央だと思ってたのですが？

[Daregada]

それらの設定は、アイテムを縦に並べるか、横に並べるか、で上下・左右が変わります。
どうにも理解が怪しいので、もう一度flexレイアウトを勉強し直してください。

Answer 2

align-items: center;
を下記に変更。
align-items: flex-start;

---

コメントより

高さに対して上下中央に文字を配置したいと考えております

こういうことでしょうか。

<style>
  body,html{
    height:100%;
  }
</style>

<div style="background-color:yellow;display:flex;align-items: center;
            width:85%;height:30%;text-align:left;float:left">
  なぜか中央揃えになる
</div>

Comments

[rtye]

回答ありがとうございます
左詰めになりましたが、高さに対して上下中央に文字を配置したいと考えております

[rtye]

なので、align-items: center;も外せないと思うのですが、何か方法はありませんでしょうか

[rtye]

現在の状況です

<style>
body,html{
height:100%;
}
</style>

<div style="background-color:yellow;display: flex;align-items: flex-start;;width:85%;height:30%;text-align:left;float:left">なぜか中央揃えになる</div>

左詰めにはできましたが、align-items: center;じゃなくなったので文字を上下中央に配置できなくなりました

[Daregada]

「外したくありません」と書いている「flex-direction: column;」が外れていますが、いいんですか。

[rtye]

失礼しました。

Answer 3

text-algin:leftはどうですか？

Comments

[rtye]

できません