2つのフレックスアイテムを連続して整列させる

Question

フレックスボックスの要素が2つあり、それぞれブラウザウィンドウの50％を占めています。

今、私はそれをコード化した方法から、それらはお互いに積み重ねるだけです。

これらの2つを互いにインラインにするにはどうすればよいですか？

子どもの幅が50％のときに、コンテナをinline-blockに設定しようとしました。

ライブ参照：https://jsfiddle.net/mqefpdkt/

/*.desktop{ 
 
    display: none; 
 
}*/ 
 
.w50 { 
 
    width: calc(50% - .1rem); 
 
} 
 
.w50.border-left { 
 
    border-left: 1px solid #dddddd; 
 
} 
 
.blog-column { 
 
    min-width: 100%; 
 
} 
 
.blog-column .blog-item { 
 
    padding: 60px 40px; 
 
    transition: all 0.3s; 
 
    background: #fff; 
 
} 
 
.blog-column .blog-item:hover { 
 
    cursor: pointer; 
 
} 
 
.blog-column .blog-item:hover h2.highlight { 
 
    background: rgba(35, 220, 116, 0.7); 
 
} 
 
.blog-column .blog-item:hover h2.highlight:after { 
 
    height: 10%; 
 
    background: #23dc74; 
 
    width: 100%; 
 
} 
 
.blog-column .blog-item span.read-more { 
 
    font-size: 2rem; 
 
} 
 
.blog-column .blog-item span.read-more:before { 
 
    content: ""; 
 
    display: block; 
 
    height: 2px; 
 
    width: 0; 
 
    background-color: transparent; 
 
} 
 
.blog-column .blog-item h2.highlight { 
 
    padding: 10px 10px 15px 10px; 
 
    display: inline-block; 
 
    margin: 0 0 20px 0; 
 
    line-height: normal; 
 
    font-weight: 700; 
 
    position: relative; 
 
    background: rgba(35, 220, 116, 0.5); 
 
    transition: all 0.3s; 
 
    font-style: italic; 
 
} 
 
.blog-column .blog-item h2.highlight:before { 
 
    display: block; 
 
    position: absolute; 
 
    top: 45%; 
 
    width: 100%; 
 
    height: 40%; 
 
    margin-left: -3px; 
 
    content: ""; 
 
} 
 
.blog-column .blog-item h2.highlight:after { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 10%; 
 
    background: rgba(35, 220, 116, 0.3); 
 
    content: ""; 
 
    transition: all 0.3s; 
 
} 
 
.blog-column .blog-item h2.highlight a { 
 
    height: 100%; 
 
    color: #141516; 
 
} 
 
.blog-row > .blog-column { 
 
    width: 100% !important; 
 
} 
 
.blog-row { 
 
    border-top: 1px solid #ddd; 
 
} 
 
.gutters { 
 
    padding: 0.1rem; 
 
} 
 
.gutters > .blog-column, 
 
.gutters > .blog-row { 
 
    width: 100% !important; 
 
    min-width: 0; 
 
} 
 
.space-around { 
 
    -webkit-justify-content: space-around; 
 
    -ms-flex-pack: distribute; 
 
    justify-content: space-around; 
 
} 
 
.center { 
 
    -webkit-align-items: start; 
 
    -ms-flex-align: start; 
 
    -ms-grid-row-align: start; 
 
    align-items: start; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
} 
 
.panel { 
 
    text-align: center; 
 
} 
 
.panel.secondary { 
 
    background-color: #fff; 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    .blog-item:hover h2.highlight { 
 
    background: rgba(35, 220, 116, 0.7); 
 
    } 
 
    .blog-item:hover h2.highlight:after { 
 
    height: 10%; 
 
    background: rgba(35, 220, 116, 0.8); 
 
    width: 100% !important; 
 
    } 
 
    .blog-item span.read-more { 
 
    font-size: 2rem; 
 
    } 
 
    .blog-item span.read-more:before { 
 
    content: ""; 
 
    display: block; 
 
    height: 2px; 
 
    width: 0; 
 
    background-color: transparent; 
 
    } 
 
    .blog-item h2.highlight { 
 
    padding: 10px; 
 
    display: inline-block; 
 
    margin: 0 0 25px 0; 
 
    line-height: normal; 
 
    font-weight: 700; 
 
    position: relative; 
 
    background: rgba(35, 220, 116, 0.5); 
 
    transition: all 0.3s; 
 
    font-style: italic; 
 
    } 
 
    .blog-item h2.highlight:before { 
 
    display: block; 
 
    position: absolute; 
 
    top: 45%; 
 
    width: 100%; 
 
    height: 40%; 
 
    margin-left: -3px; 
 
    content: ""; 
 
    } 
 
    .blog-item h2.highlight:after { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 0 !important; 
 
    height: 10%; 
 
    background: rgba(35, 220, 116, 0.3); 
 
    content: ""; 
 
    transition: all 0.3s; 
 
    } 
 
    .blog-column { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-flex: 1 1 auto; 
 
    -ms-flex: 1 1 auto; 
 
    flex: 1 1 auto; 
 
    height: auto; 
 
    -webkit-flex-wrap: nowrap; 
 
    -ms-flex-wrap: nowrap; 
 
    flex-wrap: nowrap; 
 
    } 
 
    .blog-column .blog-item span.read-more { 
 
    padding-bottom: 5px; 
 
    text-align: center; 
 
    } 
 
    .blog-column .blog-item .right-arrow { 
 
    transition: all 0.3s; 
 
    position: relative; 
 
    } 
 
    .blog-column .blog-item:hover .right-arrow { 
 
    left: 5px; 
 
    } 
 
    .blog-column .blog-item h2 { 
 
    padding: 0; 
 
    font-size: 2.5rem; 
 
    text-align: center; 
 
    } 
 
    .gutters { 
 
    padding: 2rem; 
 
    } 
 
    .gutters > .blog-column, 
 
    .gutters > .blog-row { 
 
    margin: 1rem; 
 
    border-bottom: 5px solid red; 
 
    } 
 
}

<div class='panel white'> 
 
    <div class='blog-row space-around'> 
 

 
    <div class='blog-column w50'> 
 
     <div class='blog-item center'> 
 

 
     <h2 class='highlight'><a 
 
      href='#' 
 
      class='w50'>Article Title</a></h2> 
 

 
     <span class='read-more'>Latest from the blog <span class='right-arrow'>&rarr;</span></span> 
 

 
     </div> 
 
    </div> 
 

 
    <div class='blog-column w50 desktop'> 
 
     <div class='blog-item center'> 
 

 
     <h2 class='highlight'><a 
 
      href='#'>Article Title</a></h2> 
 

 
     <span class='read-more'>Latest from the blog <span class='right-arrow'>&rarr;</span></span> 
 

 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
</div>

Answer 1

あなたはクラスspace-aroundとdivのフレックスコンテナを作成する必要があります。これに代えて

：

.space-around { 
    justify-content: space-around; 
} 

はこれを試してみてください：

は

.space-around { 
    display: flex; 
    justify-content: space-around; 
} 

これは、両方の子供（w50）に、水平方向の配置を含むデフォルトフレックス設定を適用します。

Revised Fiddle

あなたは両方の項目が画面をオーバーフローしないようにしたい場合は、このルールを削除します。

.blog-column { min-width: 100%; }