フレックスボックス、最初の行をラップしないでください
srgg6701
内側のブロックが互いに続く必要があり、浮いたもののように動作するコンテナがあります。解像度が変更された後にレイアウトが再配置されるため、floatを使用できません。現在、ブロック1（70％幅）と2（30％）の両方が同じ行にある必要がありますが、2番目のブロックは次の行に移動します。
HTML：
<section>
<div>Header</div>
<div>SideRight</div>
<div>Bottom line</div>
</section>
CSS
body * {
box-sizing: border-box;
}
section {
background: #ddd;
display: flex;
flex-direction: column;
max-width:300px;
}
section > div{
padding: 10px;
}
section > div:nth-child(1){
background-color: pink;
width: 70%;
}
section > div:nth-child(2){
background-color: lightgreen;
align-self: flex-end;
width: 30%;
}
section > div:nth-child(3){
background-color: yellow;
}
ここでライブの例を見ることができます：https：//plnkr.co/edit/f6LWiQfpRUwYYyW9Dve4？p = Preview
それで、達成することは可能ですか？最後に、次のようになります。
Yandy_Viera
あなたは追加することができますflex-wrap: wrap;にsectionして削除しflex-direction: column;、次のように
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //add this
}
あなたは「ボトムライン」をしたい場合は、行全体が追加記入flex-grow: 1;しますsection > div:nth-child(3)
最終結果は次のようになります
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //new
}
section > div:nth-child(3) {
background-color: yellow;
flex-grow: 1; //new
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
チェックボックスをオフにしないでください
- 2
Mozillaフレックスボックスがブートストラップ行で機能しない
- 3
フレックス方向の列を使用して、フレックスの子要素で同じ幅を使用しないでください
- 4
フレックス列の行の高さが等しくない
- 5
ラップなしのフレックスボックスが正しく位置合わせされていない
- 6
NAMEボックスに特殊文字を使用しないでください
- 7
jQueryDroppable-ドロップ後に<li>タグの元のCSSクラスを削除しないでください
- 8
「0」を制限する方法は、jqueryを使用してテキストボックスの最初の文字に配置しないでください。
- 9
[ボックスの選択]テキストではなく、に等しいボックスのテキストを選択してください-jQuery
- 10
グリッド行をスクロールしてフォーカスを表示しないでください
- 11
スパークライン棒グラフのバースペースにツールチップを表示しないでください
- 12
ArchLinuxグラフィックスとしないでください
- 13
スフィンクスインデックスの更新を考えていますが、新しいレコードを検索しないでください
- 14
プールPythonを使用してスタックトレースを出力しないでください
- 15
Javaアプレットに署名して、それをサンドボックスに保持できますか（ユーザーのコンピューターへのフルアクセスを与えないでください）？
- 16
空のテキストボックスc＃を送信しないでください
- 17
フレックスボックスアイテム間に等間隔で箇条書きを追加します（ただし、アイテム間のみで、ラップされた行の最初または最後ではありません）
- 18
ライトボックス内の画像と垂直方向に整列しないでください
- 19
フレックスボックスを使用して要素を新しい行/行にラップします
- 20
CloudFormationでスタック削除時にスナップショットを作成しないでください
- 21
スレッドが使用するマップのEnforce要素は、最初のスレッドが実行を完了するまで、別のスレッドで使用しないでください。
- 22
18.04デスクトップにアクセスするために画面をクリックしてドラッグしないでください
- 23
Reactフックでリストを再レンダリングしないでください
- 24
フレックスラップでフレックスボックスが全高にならない
- 25
エラーが発生した後、テキストボックスの値をクリアしないでください
- 26
トグルクラスは再度クリックしないでください
- 27
フレックスボックスで写真が小さくならないのはなぜですか？
- 28
フレックスボックスを使用してすべてをラップするか、まったくラップしない
- 29
バックグラウンドでPHPスクリプトを実行し、Linuxを死なないでください
コメントを追加