html - 使两个 flex 元素排成一行

Question

我有两个 flexbox 元素，每个元素都应该占据浏览器窗口的 50%。

现在，从我的编码方式来看，它们只是相互堆叠。

我怎样才能让这两者相互内联？

我已经尝试将它们的容器设置为 inline-block 而子项的宽度为 50%。

实时引用: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 成为 flex 容器。

取而代之的是:

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

试试这个:

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

这将对两个子项 (w50) 应用默认的 flex 设置，包括水平对齐。

Revised Fiddle

如果您希望两个元素都不会溢出屏幕，请删除此规则:

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