使用Flex-框對齊元素，左，右

我試圖對準h2的左側和edit使用柔性框的右側。我跟着方法here和使用justify-content財產，但仍然沒有成功。任何幫助，將不勝感激。使用Flex-框對齊元素，左，右

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Title of the document</title> 
    <style> 
     .ReviewBlock__Main { 
      display: flex; 
      flex-direction: column; 
      justify-content: center; 
      line-height: normal; 
      max-width: 70rem; 
      margin: 5rem auto; 
     } 

     @media screen and (min-width: 640px) { 
      .ReviewBlock__Main { 
       flex-direction: row; 
      } 
     } 

     .ReviewBlock__Main__Section { 
      border-style: solid; 
      border-width: 1px; 
      display: flex; 
      flex-wrap: wrap; 
      margin: auto; 
      padding: 10px; 
      width: 95%; 
      display: flex; 
     } 

     @media screen and (min-width: 640px) { 
      .ReviewBlock__Main__Section { 
       width: 33%; 
       margin: 10px; 
       padding: 10px; 
      } 
     } 

     .ReviewBlock__Main__Section__TitleBlock { 
      display: flex; 
      justify-content: space-between; 
     } 

     .ReviewBlock__Main__Section__TitleBlock__Title { 
      font-weight: bold; 
      margin: 5px auto 15px 15px; 
     } 

     .ReviewBlock__Main__Section__TitleBlock__Edit { 
      margin: auto; 
     } 
    </style> 

</head> 

<body> 
    <div class="ReviewBlock"> 
     <div class="ReviewBlock__Main"> 
      <section class="ReviewBlock__Main__Section"> 
       <div> 
        <span class="ReviewBlock__Main__Section__TitleBlock"> 
          <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Shipping information</h2> 
          <a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a> 
         </span> 
       </div> 
      </section> 
      <section class="ReviewBlock__Main__Section"> 
       <div> 
        <span class="ReviewBlock__Main__Section__TitleBlock"> 
          <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Billing information</h2> 
          <a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a> 
         </span> 
       </div> 
      </section> 
      <section class="ReviewBlock__Main__Section"> 
       <div> 
        <span class="ReviewBlock__Main__Section__TitleBlock"> 
         <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Order Summary</h2> 
        </span> 
       </div> 
      </section> 
     </div> 

</body> 

</html>

來源

2017-05-08 Node.JS

你必須給你的div在部分width: 100%。

.ReviewBlock__Main { 
 
      display: flex; 
 
      flex-direction: column; 
 
      justify-content: center; 
 
      line-height: normal; 
 
      max-width: 70rem; 
 
      margin: 5rem auto; 
 
     } 
 

 
     @media screen and (min-width: 640px) { 
 
      .ReviewBlock__Main { 
 
       flex-direction: row; 
 
      } 
 
     } 
 

 
     .ReviewBlock__Main__Section { 
 
      border-style: solid; 
 
      border-width: 1px; 
 
      display: flex; 
 
      flex-wrap: wrap; 
 
      margin: auto; 
 
      padding: 10px; 
 
      width: 95%; 
 
      display: flex; 
 
     } 
 

 
     @media screen and (min-width: 640px) { 
 
      .ReviewBlock__Main__Section { 
 
       width: 50%; 
 
       margin: 10px; 
 
       padding: 10px; 
 
      } 
 
     } 
 

 
     .ReviewBlock__Main__Section__TitleBlock { 
 
      display: flex; 
 
      justify-content: space-between; 
 
     } 
 
     
 
     .ReviewBlock__Main__Section > div { 
 
      width: 100%; 
 
     } 
 

 
     .ReviewBlock__Main__Section__TitleBlock__Title { 
 
      font-weight: bold; 
 
      margin: 5px auto 15px 15px; 
 
     } 
 

 
     .ReviewBlock__Main__Section__TitleBlock__Edit { 
 
      margin: auto; 
 
     }

<div class="ReviewBlock"> 
 
     <div class="ReviewBlock__Main"> 
 
      <section class="ReviewBlock__Main__Section"> 
 
       <div> 
 
        <span class="ReviewBlock__Main__Section__TitleBlock"> 
 
          <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Shipping information</h2> 
 
          <a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a> 
 
         </span> 
 
       </div> 
 
      </section> 
 
      <section class="ReviewBlock__Main__Section"> 
 
       <div> 
 
        <span class="ReviewBlock__Main__Section__TitleBlock"> 
 
          <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Billing information</h2> 
 
          <a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a> 
 
         </span> 
 
       </div> 
 
      </section> 
 
      <section class="ReviewBlock__Main__Section"> 
 
       <div> 
 
        <span class="ReviewBlock__Main__Section__TitleBlock"> 
 
         <h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Order Summary</h2> 
 
        </span> 
 
       </div> 
 
      </section> 
 
     </div>

來源

2017-05-08 06:46:55 Huelfe

這個工作。謝謝。 –

不客氣！ :) – Huelfe

使用Flex-框對齊元素，左，右

回答

相關問題