フレックスボックス/ cssを使ってフォームを整える方法

Question

私はフレックスボックスを使ってフォームをデザインしていますので、デスクトップとモバイルで反応することができます。ここで私がこれまで持っているもののデモです：

http://codepen.io/sontek/pen/akQqYN?editors=1100

CSS：

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500'; 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css); 

body { 
    font-family: "Roboto", "Helvetica", "Arial", sans-serif; 
} 

.control .input { 
    color: #5f5f5f; 
    box-sizing: border-box; 
    width: 60%; 
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); 
    padding: 15px; 
    border: 1px solid #dbdbdb; 
    display: inline-flex; 
} 

.control.success .input { 
    border: 1px solid #4EA822; 
} 

.control.success i { 
    color: #4EA822; 
} 

.control.error .input { 
    border: 1px solid rgba(237,108,99, 0.7); 
} 

.control.error i { 
    color: #ed6c63; 
} 

.control { 
    margin-bottom: 10px; 
    min-width: 300px; 
    width: 100%; 
} 

.control .help { 
    margin-top: 10px; 
    color: #999; 
    font-size: 0.9em; 

    @media (min-width: 600px) { 
     text-align: right; 
    } 

} 

.control .row { 
    display: flex; 
    flex-direction: column; 

    @media (min-width: 600px) { 
    align-items: center; 
    justify-content: center; 
    flex-direction: row; 
    } 
} 


.control .label { 
    font-size: 1.2em; 
    color: #555; 
    @media (min-width: 600px) { 
    text-align: right; 
    } 
    padding-right: 10px; 
} 

.control .row { 
    .label { 
    flex: 1; 
    } 
    .input { 
    flex: 2; 
    padding-right: 30px; 
    padding-left: 30px; 
    width: 100%; 
    } 

    i { 
    width: 0; 
    display: inline-flex; 
    position: relative; 
    left: -25px; 
    } 
} 

.control i { 
    font-size: 20px; 
} 

.center-block { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 20px; 
} 

HTML：

<form class="center-block"> 
    <div class="control"> 
    <div class="row"> 
     <label class="label">Standard</label> 
     <input type="text" name="text-input" class="input"/> 
    </div> 
    <div class="help"> 
     Help Information 
    </div> 
    </div> 
    <div class="control success"> 
    <div class="row"> 
     <label class="label">Success</label> 
     <input type="text" name="text-input" class="input"/> 
     <i class="fa fa-check"></i> 
    </div> 
    <div class="help"> 
     Help Information 
    </div> 
    </div> 
    <div class="control error"> 
    <div class="row"> 
     <label class="label">Error</label> 
     <input type="text" name="text-input" class="input"/> 
     <i class="fa fa-warning"></i> 
    </div> 
    <div class="help"> 
     Help Information 
    </div> 
    </div> 
</form> 

問題今はそのとき、モバイル上での応答し、フロー内で列の方向に反転すると、アイコンは吹き飛びます：

EDIT上のスクリーンショットは、codepenを反映していないが、私は携帯電話のためのテキストボックスの左側に並ぶアイコンを取得することができたが、私はの右側にそれを持っ好みますテキストボックス

EDIT 2：アイコンを修正しました。今空白問題を修正する必要があります。

私はそれがその行とその列があるときに入力内に滞在したいと思います。

私が持っている他の大きな問題は、そのように彼らは、私は同じ幅の最も広いラベルとしても、入力がスペースの残りの部分を引き継ぐようにするに十分なだけのフレックスにラベル付けしたいと思い、ラベルに間隔を置いています正しく整列している。

この空白は不要です。

Answer 1

アイコンは、あなたがflex-direction: columnにコンテナを切り替えているので、小さな画面上で下にシフトしています。したがって、ラベル、入力およびアイコン（すべてのフレックスアイテム）は垂直方向に積み重なっています。

小さな画面の場合は、容器をflex-direction: rowに保ち、flex-wrap: wrapを追加し、ラベルの幅を100％にします。これにより、入力とアイコンが強制的に次の行に移動します。

/* .control .row { flex-direction: column; } */ 
.control .row { flex-wrap: wrap; } 
.control .label { flex: 0 0 100%; } 

このしようと、左側の空白の問題を修正するには：今

@media (min-width: 600px) 
.control .row .label { 
    /* flex: 1; */ 
    flex: 1 0 10%; 
    white-space: nowrap; 
} 

.control .row .input { 
    flex: 2; 
    padding-right: 30px; 
    padding-left: 30px; 
    /* width: 100%; */ 
} 

を、あなたのコード内text-alignルールは、私の例で適用される幅の制限（10％以内のラベルを配置します）。