Flexboxと同じ高さの入力をどのように配置するのですか？

Question

私はThisメニューをビルドし、左側の入力を正しいものと同じ高さに設定することはできません...私が考えている解決策は、入力のdivに等しい高さを設定してから使用することですフレックス - 成長し、そのフィールドの高さの倍にフィールド7を設定...私はそれを試して、それが動作していない - おそらく彼らはそれを行うより良い方法です？私もブートストラップでやろうとしましたが、同じ問題が発生します。

HTML：

<div class="container"> 

     <div class="tab-pane active" id="mes_informations"> 
     <div class="row"> 
      <div class="col-md-10"> 

      <div class="row"> 
       <div class="col-md-6 mes_informations_left_cont"> 

       <div class="inputs_grp"> 
        <p>field 1</p> 
        <div class="switch_div_info"> 


        <div class="switch" style="border-radius:25px;"> 

         <input type="radio" class="switch-input" name="view" value="" id="week" checked=""> 

         <label for="week" class="switch-label switch-label-off male"> 
         <i class="fa fa-mars" aria-hidden="true"></i> 
         <label> 
          Homme 
         </label> 
         </label> 

         <input type="radio" class="switch-input" name="view" value="" id="month"> 
         <label for="month" class="switch-label switch-label-on female"> 
         <label> 
          Femme 
         </label> <i class="fa fa-venus" aria-hidden="true"></i></label> 


         <span class="switch-selection"></span> 
        </div> 
        </div> 
       </div> 
       <div class="inputs_grp"> 
        <p>field 2</p> 
        <input class="form-control" id="societe" type="text"> 
       </div> 
       <div class="inputs_grp"> 
        <p>field 3</p> 
        <input class="form-control" id="siren" type="text"> 
       </div> 
       <div class="inputs_grp"> 
        <p>field 3</p> 
        <input class="form-control" id="nom_contact" type="text"> 
       </div> 
       <div class="inputs_grp"> 
        <p>field 4</p> 
        <input class="form-control" id="prenom_contact" type="text"> 
       </div> 

       </div> 


       <div class="col-md-6 mes_informations_right_cont"> 
       <div class="inputs_grp"> 
        <p>field 5</p> 
        <input class="form-control" id="service" type="text"> 
       </div> 
       <div class="inputs_grp"> 
        <p>field 6</p> 
        <input class="form-control" id="address" type="text"> 
       </div> 
       <div class="inputs_grp input_double"> 

        <p>field 7</p> 
        <input class="form-control" id="address_fac" type="text"> 

        <div class="address_input_grp"> 
        <input class="form-control pull-left" id="vile" type="text"> 
        <input class="form-control pull-right" id="code_postal" type="text"> 
        </div> 
       </div> 
       <div class="inputs_grp"> 
        <p>field 8</p> 
        <input class="form-control" id="nom_contact_fac" type="text"> 
       </div> 
       </div> 
      </div> 


      </div> 
     </div> 
     </div> 
    </div> 

CSS：すべての入力がフレキシボックスでインライン化の変化によって固定

.container { 
     padding: 15px; 
     height: 800px; 
     width: 800px; 
     background-color: #e9e9e9; 
    } 

    .switch_div_info .switch { 
     float: left; 
     position: relative; 
     height: 32px; 
     width: 140px; 
     /*margin: 20px auto;*/ 
     background: white; 
     border-radius: 3px; 
     -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); 
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); 
    } 

    .switch_div_info .switch-label { 
     position: relative; 
     z-index: 2; 
     float: left; 
     width: 58px; 
     line-height: 26px; 
     font-size: 11px; 
     color: rgba(255, 255, 255, 0.35); 
     text-align: center; 
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); 
     cursor: pointer; 
    } 

    .switch_div_info .switch-label label { 
     font-family: 'Montserrat', sans-serif; 
     color: #2b2b2b; 
     display: none; 
     font-size: 12px; 
     position: relative; 
     display: none; 
     font-weight: 100; 
    } 

    .switch_div_info .switch-label:active { 
     font-weight: bold; 
    } 

    .switch_div_info .switch-label-off { 
     padding-left: 2px; 
    } 

    .switch_div_info .switch-label-on { 
     padding-right: 2px; 
    } 

    .switch_div_info .switch-input { 
     display: none; 
    } 

    .switch_div_info .switch-input:checked + .switch-label { 
     font-weight: bold; 
     color: rgba(0, 0, 0, 0.65); 
     text-shadow: 0 1px rgba(255, 255, 255, 0.25); 
     -webkit-transition: 0.15s ease-out; 
     -moz-transition: 0.15s ease-out; 
     -ms-transition: 0.15s ease-out; 
     -o-transition: 0.15s ease-out; 
     transition: 0.15s ease-out; 
     -webkit-transition-property: color, text-shadow; 
     -moz-transition-property: color, text-shadow; 
     -ms-transition-property: color, text-shadow; 
     -o-transition-property: color, text-shadow; 
     transition-property: color, text-shadow; 
    } 

    .switch_div_info .switch-input:checked + .switch-label label { 
     display: block; 
    } 

    .switch_div_info .switch-input:checked + .switch-label-on ~ .switch-selection { 
     left: 45px; 
     /* Note: left: 50%; doesn't transition in WebKit */ 
    } 

    .switch_div_info .switch-selection { 
     position: absolute; 
     z-index: 1; 
     top: -1px; 
     left: 0px; 
     display: block; 
     width: 105px; 
     height: 36px; 
     border-radius: 3px; 
     background-color: white; 
     -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 
     -webkit-transition: left 0.15s ease-out; 
     -moz-transition: left 0.15s ease-out; 
     -ms-transition: left 0.15s ease-out; 
     -o-transition: left 0.15s ease-out; 
     transition: left 0.15s ease-out; 
     border-radius: 25px; 
    } 

    .switch_div_info .switch .switch-label .fa { 
     font-size: 20px; 
     margin-top: 6px; 
    } 

    .switch_div_info .switch .switch-label.male { 
     float: left; 
    } 

    .switch_div_info .switch .switch-label.female { 
     float: right; 
    } 

    .switch_div_info .switch .switch-label.male .fa { 
     float: left; 
     margin-left: 5px; 
    } 

    .switch_div_info .switch .switch-label.female .fa { 
     float: right; 
     margin-right: 5px; 
    } 

    .switch_div_info .switch .switch-label.male label { 
     left: 31px; 
     top: -23px; 
    } 

    .switch_div_info .switch .switch-label.female label { 
     right: 26px; 
     top: 3px; 
    } 

    .switch_div_info .switch-input:checked + .switch-label.female .fa { 
     position: relative; 
     top: -30px; 
    } 

    .switch_div_info .switch-input:checked + .switch-label .fa { 
     color: rgb(73, 200, 193); 
    } 

    #mes_informations .cont { 
     display: flex; 
    } 

    #mes_informations P { 
     font-family: 'Montserrat', sans-serif; 
     font-size: 0.8vw; 
     color: #2b2b2b; 
    } 

    .mes_informations_left_cont { 
     min-height: 400px; 
     display: flex; 
     flex-direction: column; 
     justify-content: space-between; 
     flex-wrap: wrap; 
     align-items: stretch; 
    } 

    .mes_informations_right_cont { 
     min-height: 400px; 
     display: flex; 
     flex-direction: column; 
     justify-content: space-between; 
     flex-wrap: wrap; 
     align-items: stretch; 
    } 

    #mes_informations .cont .left_cont > .inputs_grp, 
    #mes_informations .cont .right_cont > .inputs_grp {} 


    /*.left_cont > .inputs_grp, .right_cont > .inputs_grp {*/ 


    /*min-height: 60px;*/ 


    /*margin-top: 17px;*/ 


    /*margin-bottom: 15px;*/ 


    /*}*/ 


    /*.address_grp{ 
     min-height: 136px!important; 
    }*/ 


    /*.address_input_grp{*/ 


    /*padding-top: 15px;*/ 


    /*}*/ 

    .address_input_grp > input { 
     width: 48%; 
    } 

    #save_info:hover { 
     background-color: #40afa9; 
     outline: none; 
    } 

    #save_info { 
     background-color: #49c8c1; 
     border: 1px solid white; 
     border-radius: 5px; 
     font-size: 0.8vw; 
     padding: 5px 15px 5px 15px; 
     color: #fff; 
     outline: none; 
    } 

    .inputs_grp > .form-control { 
     border-radius: 5px!important; 
    } 

    .inputs_grp { 
     flex-grow: 1; 
    } 

Answer 1

。

HTML

<div class="wrapper"> 
     <div class="grp_wrap"> 

     <div class="inputs_grp"> 
        <p>CIVILITÉ</p> 
        <div class="switch_div_info"> 


        <div class="switch" style="border-radius:25px;"> 

         <input type="radio" class="switch-input" name="view" value="" id="week" checked=""> 

         <label for="week" class="switch-label switch-label-off male"> 
         <i class="fa fa-mars" aria-hidden="true"></i> 
         <label> 
          Homme 
         </label> 
         </label> 

         <input type="radio" class="switch-input" name="view" value="" id="month"> 
         <label for="month" class="switch-label switch-label-on female"> 
         <label> 
          Femme 
         </label> <i class="fa fa-venus" aria-hidden="true"></i></label> 


         <span class="switch-selection"></span> 
        </div> 
        </div> 
       </div> 
       <div class="inputs_grp"> 
        <p>SERVICE À FACTURER</p> 
        <input class="form-control" id="service" type="text"> 
       </div> 

    </div> 
    <div class="grp_wrap"> 

    <div class="inputs_grp"> 
     <p>SOCIÉTÉ</p> 
     <input class="form-control" id="societe" type="text"> 
    </div> 

    <div class="inputs_grp"> 
     <p>ADRESSE DE FACTURATION</p> 
     <input class="form-control" id="address" type="text"> 
    </div> 

    </div> 
    <div class="grp_wrap"> 
    <div class="inputs_grp"> 
        <p>SIRET/SIREN</p> 
        <input class="form-control" id="siren" type="text"> 
       </div> 
     <div class="inputs_grp"> 

        <p>ADRESSE</p> 
        <input class="form-control" id="address_fac" type="text"> 


       </div> 

    </div> 
    <div class="grp_wrap"> 
    <div class="inputs_grp"> 
        <p>PRÉNOM DU CONTACT PRINCIPAL</p> 
        <input class="form-control" id="prenom_contact" type="text"> 
       </div> 
     <div class="inputs_grp address_input_grp"> 
        <input class="form-control pull-left" id="vile" type="text"> 
        <input class="form-control pull-right" id="code_postal" type="text"> 
        </div> 
    </div> 
    <div class="grp_wrap"> 
     <div class="inputs_grp"> 
        <p>PRÉNOM DU CONTACT PRINCIPAL</p> 
        <input class="form-control" id="prenom_contact" type="text"> 
       </div> 
       <div class="inputs_grp"> 
        <p>NOM DE CONTACT DE FACTURATION</p> 
        <input class="form-control" id="nom_contact_fac" type="text"> 
       </div> 
    </div> 
    </div> 

CSS：あなたは* *異なる `flexbox`年代にフレックス子供を揃えることができません

.wrapper{ 
     width:80%; 
    } 
    .inputs_grp{ 
     width:48%; 

     margin-bottom:15px; 

    } 

    .grp_wrap{ 
     display:flex; 
    } 

     .switch_div_info .switch { 
       float: left; 
       position: relative; 
       height: 32px; 
       width: 140px; 
       /*margin: 20px auto;*/ 
       background: white; 
       border-radius: 3px; 
       -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); 
       box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); 
      } 

      .switch_div_info .switch-label { 
       position: relative; 
       z-index: 2; 
       float: left; 
       width: 58px; 
       line-height: 26px; 
       font-size: 11px; 
       color: rgba(255, 255, 255, 0.35); 
       text-align: center; 
       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); 
       cursor: pointer; 
      } 

      .switch_div_info .switch-label label { 
       font-family: 'Montserrat', sans-serif; 
       color: #2b2b2b; 
       display: none; 
       font-size: 12px; 
       position: relative; 
       display: none; 
       font-weight: 100; 
      } 

      .switch_div_info .switch-label:active { 
       font-weight: bold; 
      } 

      .switch_div_info .switch-label-off { 
       padding-left: 2px; 
      } 

      .switch_div_info .switch-label-on { 
       padding-right: 2px; 
      } 

      .switch_div_info .switch-input { 
       display: none; 
      } 

      .switch_div_info .switch-input:checked + .switch-label { 
       font-weight: bold; 
       color: rgba(0, 0, 0, 0.65); 
       text-shadow: 0 1px rgba(255, 255, 255, 0.25); 
       -webkit-transition: 0.15s ease-out; 
       -moz-transition: 0.15s ease-out; 
       -ms-transition: 0.15s ease-out; 
       -o-transition: 0.15s ease-out; 
       transition: 0.15s ease-out; 
       -webkit-transition-property: color, text-shadow; 
       -moz-transition-property: color, text-shadow; 
       -ms-transition-property: color, text-shadow; 
       -o-transition-property: color, text-shadow; 
       transition-property: color, text-shadow; 
      } 

      .switch_div_info .switch-input:checked + .switch-label label { 
       display: block; 
      } 

      .switch_div_info .switch-input:checked + .switch-label-on ~ .switch-selection { 
       left: 45px; 
       /* Note: left: 50%; doesn't transition in WebKit */ 
      } 

      .switch_div_info .switch-selection { 
       position: absolute; 
       z-index: 1; 
       top: -1px; 
       left: 0px; 
       display: block; 
       width: 105px; 
       height: 36px; 
       border-radius: 3px; 
       background-color: white; 
       -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 
       -webkit-transition: left 0.15s ease-out; 
       -moz-transition: left 0.15s ease-out; 
       -ms-transition: left 0.15s ease-out; 
       -o-transition: left 0.15s ease-out; 
       transition: left 0.15s ease-out; 
       border-radius: 25px; 
      } 

      .switch_div_info .switch .switch-label .fa { 
       font-size: 20px; 
       margin-top: 6px; 
      } 

      .switch_div_info .switch .switch-label.male { 
       float: left; 
      } 

      .switch_div_info .switch .switch-label.female { 
       float: right; 
      } 

      .switch_div_info .switch .switch-label.male .fa { 
       float: left; 
       margin-left: 5px; 
      } 

      .switch_div_info .switch .switch-label.female .fa { 
       float: right; 
       margin-right: 5px; 
      } 

      .switch_div_info .switch .switch-label.male label { 
       left: 31px; 
       top: -23px; 
      } 

      .switch_div_info .switch .switch-label.female label { 
       right: 26px; 
       top: 3px; 
      } 

      .switch_div_info .switch-input:checked + .switch-label.female .fa { 
       position: relative; 
       top: -30px; 
      } 

      .switch_div_info .switch-input:checked + .switch-label .fa { 
       color: rgb(73, 200, 193); 
      }