常連

自己紹介

```css
display: flex;
flex-shrink: 0;
```

だと文字列がはみ出てしまいますが、

![イメージ説明](d50cac7f35ada0424f711ae404f1fc6e.png)

```css
display: block !important;
flex-shrink: 1 !important;
```

display: block + flex-shrink: 1にすると改善されました。

![イメージ説明](274271d0a900b63d9cb6b443d1b5749b.png)


---

上記現象についていつくか質問させてください。

質問1.

文字列折り返しできない問題は
word-breakとかoverflow-wrapで解決できると思いましたが、`display: flex;`配下ではまったく効きませんでした。

`display: flex;`配下ではword-breakとかoverflow-wrapは効かない仕様でしょうか？

質問2.

display: blockでもflex-shrinkのオプションは有効に使われますか？

今まで、display: flexの時だけflex-shrinkのオプションが有効だと思いましたが、
display: blockだけではなくflex-shrinkも1にしないと問題が解決できなかったので
今までの自分の理解が誤ってたのかの確認をしたいです。

質問3.

そもそも`display: block + flex-shrink: 1`することでなぜ折返しできない問題が改善されますか？



全体のコードはこちらです。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
  </head>
  <body>
    <section class="section has-background-white-ter">
        <div class="container">
            <div class="columns is-tablet is-centered">
                <div class="column is-three-fifths has-background-white">
                    <div class="level is-mobile">
                        <div class="level-left level-left-flex-off">
                            <div class="level-item">
                                <h1 class="title is-size-4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                            </div>
                        </div>

                    </div>
                    <style type="text/css">.level-left-flex-off{display:block !important;flex-shrink:1 !important}</style>
                    
                </div>
            </div>
        </div>
    </section>

  
  </body>
</html>
```

display: flex, flex-shrink: 0配下で文字列が折返しできない問題

### 前提・実現したいこと

独学でプログラミングを勉強しています。
今回はクレカ情報を扱うシステムを想定して作成しているのですが，クレカ情報の適切な保存方法のところで躓いてしまいました。
クレカ情報などの個人情報を保存する方法について考えてみたので問題があるところ，改善できるところをご教授いただきたいです。
よろしくお願いします。

###環境
製作はXamppでのApache，mysql，php7.4ですが，
仮想として，レンタルサーバ(XserverやCoreServer，さくらサーバ等)でのLet's Encryptでの運用を前提として考えて頂けると嬉しいです。

###準備ファイル
password.jsonは100個ほど適当に作成します。(16文字)
password.jsonは非公開ディレクトリ(public_htmlよりも上のディレクトリ)に保存。
```json
{
 1:"password1",
 2:"password2",
      ・
      ・
      ・
 100:"password100"
}
```

以下のようにphp側でデータを暗号化し，暗号化したデータとベクトルデータ，パスワードのidをデータベースに保存しようと思います。
勿論，情報を取得する場合はphpで複合化します。
```php
if(isset($_POST['card_number'])//カード番号
 && is_int($_POST['card_number'])//カード番号が数字かのチェック
 && str_length((int)$_POST['card_number'])==16//カード番号の桁数確認
 && isset($_POST['card_expire'])//有効期限
 && isset($_POST['security_code'])//3桁のセキュリティコード
 && is_int($_POST['security_code'])//3桁のセキュリティコードが数字かのチェック
 && str_length((int)$_POST['security_code'])==3//セキュリティコードの桁数確認
){//POST内容の不足等チェック
$pwd_number=1;//1-100をランダムに取得
$password=$password[$pwd_number];//password.jsonからパスワードを取得(割愛)
$method='AES-256-CBC';//より良い暗号化方式はなんでしょう？
$iv_length = openssl_cipher_iv_length($method);
$iv=openssl_random_pseudo_bytes($iv_length);
$encrypted = openssl_encrypt($text, $method, $password, 0, $iv);
$iv = bin2hex($iv);
$stmt=$pdo->prepare("INSERT INTO card_info (card_number,cn_iv,pwd_number) VALUES(?,?,?)");
$stmt->execute(array($encrypted,$iv,$pwd_number));
}
```
この方法では，個人情報を扱うには脆弱でしょうか？
ベクトルデータもパスワードと同じように別ファイルで作成しておき，idと紐づけの方法もあるかと思います。
###質問したいこと
0. 上記の方法でのセキュリティレベル(十分，不十分など，理由も教えて頂きたい)
0. 上記の方法での脆弱性(どの部分がセキュリティホールに繋がるのか，改善方法など)
0. 実際に運用されている個人情報保存方法など

以上，よろしくお願いします。

#お礼
沢山のご回答ありがとうございました。
まだまだ自分の勉強不足だと感じましたのでこれからも勉強頑張ってまいります。
普段からセキュリティ関係のことでEGセキュアソリューションズ様のサイトを確認させていただいておりますし，ご丁寧な回答でしたのでockeghem様をベストアンサーに選ばさせていただきました。

レンタルサーバでクレカ情報を保存すると仮定した場合のセキュリティ対策

お疲れさまです、お世話になります。

今回はHTML・CSSの実践での"見栄えや書き方"についてご教示お願いします
まだまだ本質のプログラミングは初心者レベルから抜け出せない新参者ですが
モチベーションと気にしいな性格が相まり気になったので「まずはプログラミングからやろ」等は控えめに
ご教示よろしくおねがいします......。

"Progate"さんで少しずつ学んでいますが先日「腕試し」という形で０からコードを書く場面があったので
"コードの見やすさ"が気になりました。
```HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    
    <div class="header">
      <div class="header-logo">
        <p>Progate</p>
      </div>
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>
    
    
    <div class="main">
      <h1>HELLOWORLD<span>.</span></h1>
      <h2>プログラミングの世界へようこそ</h2>
      <div class="container">
        <h3>学べるレッスン</h3>
        <div class="contents">
          <div class="content">
            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="" />
            <p>HTML ＆CSS</p>
          </div>
          <div class="content">
            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="" />
            <p>PHP</p>
          </div>
          <div class="content">
            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="" />
            <p>Ruby</p>
          </div>
          <div class="content">
            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="" />
            <p>Swift</p>
          </div>
        </div>
      </div>
      <div>
        <div class="contact-form">
          <h3>お問い合わせ</h3>
          <p>メールアドレス（必須）</p>
          <input/>
          <p>お問い合わせ内容（必須）</p>
          <textarea></textarea>
          <p>※必須項目は必ずご入力ください</p>
          <input class="contact-submit" type="submit" value="送信" />
        </div>
      </div>
    </div>
  </body>
</html>
```
```CSS
.header {
  height: 90px;
  color: white;
  background-color: #26d0c9;
  display: flex;
}

.header-logo {
  font-size: 36px;
  padding: 20px 40px;
}

.header-list li {
  padding: 33px 20px;
}

.header-list ul {
  display: flex;
}

.main {
  padding-top: 100px;
  padding-left: 80px;
}

.main h1 {
  font-size: 140px;
}

 .main span {
   color: #ff4a4a;
 }
 
 .main h2 {
   font-size: 60px;
 }
 
 .container {
   padding-top: 100px;
   padding-bottom: 100px;
 }
 
 .container h3 {
   font-size: 28px;
   border-bottom: 2px solid #dee7ec ;
   padding-bottom: 15px;
   margin-bottom: 50px;
 }
 
 .contents {
   display: flex;
 }
 
 .content {
   padding-right: 40px;
 }

.content p {
  font-size: 24px;
}

.contact-form {
  padding-bottom: 100px;
  padding-top: 100px;
}

.contact-form h3 {
  font-size: 28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
  border-bottom: 2px solid #dee7ec;
}

.contact-form input , textarea {
  border: 1px solid #dee7ec;
  width: 400px;
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.contact-submit {
  background-color: #dee7ec;
  color: #889eab;
  font-size: 18px;
}

```

こちらが現在書き上げたコードになります。
プロ、その道に携わる方々から見て、見やすさや改善点を教えていただけると幸いです。

HTML CSS を実践で使う際の見栄えや書き方

以下のようなURLのページが動いているのですが、URLの読み取り方がわかりません。  
どのように解釈したらよいのでしょうか？

```URL
https://www.samplesamplesample.com/system/index.php/contact/
```

/system/contact/index.php や /system/index.php、/system/index.php?contact=hoge　等なら
階層構造が想像つくのですが、phpの下にcontactと自分にとって見慣れない表記です。

ちょっとした仕事の知り合いのページで、WordPressで動いているサイトの様ですが正しい命名規則なのでしょうか？
よろしくお願いします。