フレックスボックス：3列2 + 1に

Question

私は現在、<table>レイアウトを使用して古いページを離れて変換しており、フレックスボックスを使用して動作を実装しようとしています。目指すのは、3つの列を持つことです。最初の2つは水平と垂直の中央に配置され、最後の列には多くのテキストが含まれています。

私は次のようにブラウザの幅が小さい場合には最初の二つの下に3番目の列をラップするメディアクエリを使用しようとしています：

以下のコードスニペットは、正しいレイアウトを実現しますが、明らかに小さな幅に失敗し、ちょうど単一の列を生成：私はこれを推測してい

を何とかflex-wrapを必要ですか？

複数の行が1つのコンテナ行で可能ですか？または、行ごとに1つのコンテナを持つのが最善でしょうか？

.row { 
 
    display: flex; 
 
    justify-content: center; 
 
    padding: 5px; 
 
    margin: 2px; 
 
    border: 1px solid #000; 
 
    font-size: 0.7em; 
 
} 
 

 
.col1, .col2, .col3 { 
 
    background-color: #999; 
 
    padding: 8px; 
 
    margin: 2px; 
 
} 
 

 
.col1, .col2 { 
 
    flex: 1; 
 
    
 
    /* Horizontal centring */ 
 
    text-align: center; 
 

 
    /* Add vertical centring */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content:center; 
 
} 
 

 
.col3 { 
 
    flex: 3; 
 
    background-color:#fff; 
 
} 
 

 
@media(max-width: 400px){ 
 
    .row {display: block;} 
 
}

<div class="row"> 
 
<div class="col1"> 
 
    Column 1 
 
</div> 
 
<div class="col2"> 
 
    Column 2 
 
</div> 
 
<div class="col3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
 
</div> 
 
</div> 
 

 
<div class="row"> 
 
<div class="col1"> 
 
    Column 1 
 
</div> 
 
<div class="col2"> 
 
    Column 2 
 
</div> 
 
<div class="col3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
 
</div> 
 
</div>

Answer 1

col1とcol2要素の幅をあらかじめ知っている場合は、いくつかのトリックで行要素を取り除くことができます。

また

.row { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 95%; 
 
    border: solid 1px red; 
 
} 
 
.col1, 
 
.col2 { 
 
    background-color: lightblue; 
 
    padding: 10px; 
 
    background-clip: content-box; 
 
} 
 
.col3 { 
 
    flex-basis: calc(100% - 194px); 
 
    padding: 5px; 
 
} 
 
.col1, 
 
.col2, 
 
.col3 { 
 
    margin: 10px 0px; 
 
} 
 
.col1 { 
 
    border: solid 1px black; 
 
    border-right-width: 0px; 
 
    margin-left: 10px; 
 
} 
 
.col2 { 
 
    border: solid 1px black; 
 
    border-left-width: 0px; 
 
    border-right-width: 0px; 
 
} 
 
.col3 { 
 
    border: solid 1px black; 
 
    border-left-width: 0px; 
 
}

<div class="row"> 
 
    <div class="col1"> 
 
    Column 1 
 
    </div> 
 
    <div class="col2"> 
 
    Column 2 
 
    </div> 
 
    <div class="col3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
 
    </div> 
 
    <div class="col1"> 
 
    Column 1 
 
    </div> 
 
    <div class="col2"> 
 
    Column 2 
 
    </div> 
 
    <div class="col3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
 
    </div> 
 
    <div class="col1"> 
 
    Column 1 
 
    </div> 
 
    <div class="col2"> 
 
    Column 2 
 
    </div> 
 
    <div class="col3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
 
    </div> 
 
    <div class="col1"> 
 
    Column 1 
 
    </div> 
 
    <div class="col2"> 
 
    Column 2 
 
    </div> 
 
    <div class="col3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
 
    </div> 
 
    <div class="col1"> 
 
    Column 1 
 
    </div> 
 
    <div class="col2"> 
 
    Column 2 
 
    </div> 
 
    <div class="col3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
 
    </div> 
 
    <div class="col1"> 
 
    Column 1 
 
    </div> 
 
    <div class="col2"> 
 
    Column 2 
 
    </div> 
 
    <div class="col3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
 
    </div> 
 
</div>

、col1とcol2の40パーセントフレックス基礎を含め、通常のレイアウトのためのソリューション、：col3という要素の幅が非常に人工的であることに注意してください。彼らは50％でなければなりませんが、いくつかのマージンとパディングがあるので、低い側にある方が良いでしょうし、それが

.row { 
 
    display: flex; 
 
    justify-content: center; 
 
    padding: 5px; 
 
    margin: 2px; 
 
    border: 1px solid #000; 
 
    font-size: 0.7em; 
 
} 
 
.col1, 
 
.col2, 
 
.col3 { 
 
    background-color: #999; 
 
    padding: 8px; 
 
    margin: 2px; 
 
} 
 
.col1, 
 
.col2 { 
 
    flex: 1; 
 
    /* Horizontal centring */ 
 
    text-align: center; 
 
    /* Add vertical centring */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 
.col3 { 
 
    flex: 3; 
 
    background-color: #fff; 
 
} 
 
@media(max-width: 400px) { 
 
    .row { 
 
    flex-wrap: wrap; 
 
    } 
 
    .col1, 
 
    .col2 { 
 
    flex-basis: 40%; 
 
    } 
 
    .col3 { 
 
    flex-basis: 80%; 
 
    } 
 
}

<div class="row"> 
 
    <div class="col1"> 
 
    Column 1 
 
    </div> 
 
    <div class="col2"> 
 
    Column 2 
 
    </div> 
 
    <div class="col3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col1"> 
 
    Column 1 
 
    </div> 
 
    <div class="col2"> 
 
    Column 2 
 
    </div> 
 
    <div class="col3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
 
    </div> 
 
</div>

うまく機能

Answer 2

あなたの.row定義flex-wrap: wrap;を与え、それはあなたが上記に示してきたように、それはドロップダウンになるという幅の下に取得すると、列3のmin-width値を設定します。