整个div的标题对齐[响应]

Question

我必须对齐项目标题对齐到整个div的单行。内容和按钮也相同。 我不能使用Bootstrap，它也应该是响应式的。

期望输出

.flex-container, 
 
     .child-flex { 
 
      padding: 0; 
 
      margin: 0; 
 
      list-style: none; 
 
      display: -webkit-box; 
 
      display: -moz-box; 
 
      display: -ms-flexbox; 
 
      display: -webkit-flex; 
 
      display: flex; 
 
      -webkit-flex-flow: row wrap; 
 
      justify-content: space-around; 
 
     } 
 

 
     .flex-item { 
 
      background: tomato; 
 
      padding: 5px; 
 
      width: 30%; 
 
      min-height: 150px; 
 
      margin-top: 10px; 
 
      color: white; 
 
      font-weight: bold; 
 
      font-size: 3em; 
 
      text-align: center; 
 
     } 
 

 
     .child-flex-items { 
 
      width: 50%; 
 
      min-height: 150px; 
 
      display: flex; 
 
     } 
 

 
     .flex-center { 
 
      align-items: center; 
 
     } 
 

 
     .img-container { 
 
      height: 50px; 
 
      width: 50px; 
 
      background: green; 
 
     } 
 

 
     .item-header { 
 
      display: flex; 
 
     } 
 

 
     .item-header h8 { 
 
      font-size: 24px; 
 
     } 
 

 
     .flex-direction-column { 
 
      flex-direction: column; 
 
     } 
 

 
     .content-item { 
 
      font-size: 14px; 
 
     } 
 

 
     @media(max-width:767px) { 
 
      .flex-item { 
 
       width: 100%; 
 
      } 
 
     } 
 

 
     @media(min-width:768px) { 
 
      .flex-item { 
 
       width: 50%; 
 
      } 
 
     } 
 

 
     @media(min-width:992px) { 
 
      .flex-item { 
 
       width: 50%; 
 
      } 
 
     } 
 

 
     @media(min-width:1200px) { 
 
      .flex-item { 
 
       width: 32%; 
 
      } 
 
     }

<div class="flex-container"> 
 
     <div class="flex-item"> 
 
      <div class="child-flex"> 
 
       <div class="child-flex-items flex-center"> 
 
        <div class="img-container"></div> 
 
       </div> 
 
       <div class="child-flex-items flex-direction-column"> 
 
        <div class="item-header"> 
 
         <h8>Test Header</h8> 
 
        </div> 
 
        <div class="content-item"> 
 
         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p> 
 
        </div> 
 
        <div class="button-container"> 
 
         <button>Test1</button> 
 
         <button>Test1</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="flex-item"> 
 
      <div class="child-flex"> 
 
       <div class="child-flex-items flex-center"> 
 
        <div class="img-container"></div> 
 
       </div> 
 
       <div class="child-flex-items flex-direction-column"> 
 
        <div class="item-header"> 
 
         <h8>Test Header int occaecat cupidatat</h8> 
 
        </div> 
 
        <div class="content-item"> 
 
         <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> 
 
        </div> 
 
        <div class="button-container"> 
 
         <button>Test1</button> 
 
         <button>Test1</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="flex-item"> 
 
      <div class="child-flex-items flex-center"> 
 
       <div class="img-container"></div> 
 
      </div> 
 
      <div class="child-flex-items flex-direction-column"> 
 
       <div class="item-header"> 
 
        <h8>Int occaecat cupidatat</h8> 
 
       </div> 
 
       <div class="content-item"> 
 
        <p> dit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt </p> 
 
       </div> 
 
       <div class="button-container"> 
 
        <button>Test3</button> 
 
        <button>Test4</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="flex-item">4</div> 
 
     <div class="flex-item"> 
 
      <div class="child-flex-items flex-center"> 
 
       <div class="img-container"></div> 
 
      </div> 
 
      <div class="child-flex-items flex-direction-column"> 
 
       <div class="item-header"> 
 
        <h8>Ut enim ad minima veniam</h8> 
 
       </div> 
 
       <div class="content-item"> 
 
        <p> voluptatem sequi nesciunt </p> 
 
       </div> 
 
       <div class="button-container"> 
 
        <button>Test6</button> 
 
        <button>Test7</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="flex-item">6</div> 
 
    </div>

Answer 1

我加

.child-flex { 
    height: 100%; 
} 

你也有你的HTML中的例子打破，虽然第一块是好的，我复制并粘贴它6次。下一步是要坚持按钮，底部：

.content-item { 
    flex-grow: 1; 
} 

并据此草图，你还需要对文本和按钮的左对齐方式：

.content-item, .button-container { 
    text-align: left; 
} 

最后一步，如果你要对齐的图像到它的父中心，你需要添加证明内容：

.flex-center { 
    justify-content: center; 
} 

而且片段：

.flex-container, 
 
.child-flex { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: space-around; 
 
} 
 

 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 30%; 
 
    min-height: 150px; 
 
    margin-top: 10px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
} 
 

 
.child-flex-items { 
 
    width: 50%; 
 
    min-height: 150px; 
 
    display: flex; 
 
} 
 

 
.flex-center { 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.img-container { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: green; 
 
} 
 

 
.item-header { 
 
    display: flex; 
 
} 
 

 
.item-header h8 { 
 
    font-size: 24px; 
 
} 
 

 
.flex-direction-column { 
 
    flex-direction: column; 
 
} 
 

 
.content-item { 
 
    font-size: 14px; 
 
    text-align: left; 
 
} 
 

 
@media(max-width:767px) { 
 
    .flex-item { 
 
    width: 100%; 
 
    } 
 
} 
 

 
@media(min-width:768px) { 
 
    .flex-item { 
 
    width: 50%; 
 
    } 
 
} 
 

 
@media(min-width:992px) { 
 
    .flex-item { 
 
    width: 50%; 
 
    } 
 
} 
 

 
@media(min-width:1200px) { 
 
    .flex-item { 
 
    width: 32%; 
 
    } 
 
} 
 

 
.child-flex { 
 
    height: 100%; 
 
} 
 

 
.content-item { 
 
    flex-grow: 1; 
 
} 
 

 
.button-container { 
 
    text-align: left; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"> 
 
    <div class="child-flex"> 
 
     <div class="child-flex-items flex-center"> 
 
     <div class="img-container"></div> 
 
     </div> 
 
     <div class="child-flex-items flex-direction-column"> 
 
     <div class="item-header"> 
 
      <h8>Test Header</h8> 
 
     </div> 
 
     <div class="content-item"> 
 
      <p> Lorem ipsum dolor sit a nisi</p> 
 
     </div> 
 
     <div class="button-container"> 
 
      <button>Test1</button> 
 
      <button>Test1</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="child-flex"> 
 
     <div class="child-flex-items flex-center"> 
 
     <div class="img-container"></div> 
 
     </div> 
 
     <div class="child-flex-items flex-direction-column"> 
 
     <div class="item-header"> 
 
      <h8>Test Header</h8> 
 
     </div> 
 
     <div class="content-item"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p> 
 
     </div> 
 
     <div class="button-container"> 
 
      <button>Test1</button> 
 
      <button>Test1</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="child-flex"> 
 
     <div class="child-flex-items flex-center"> 
 
     <div class="img-container"></div> 
 
     </div> 
 
     <div class="child-flex-items flex-direction-column"> 
 
     <div class="item-header"> 
 
      <h8>Test Header</h8> 
 
     </div> 
 
     <div class="content-item"> 
 
      <p> Lorem ipsum dolor sit a nisi</p> 
 
     </div> 
 
     <div class="button-container"> 
 
      <button>Test1</button> 
 
      <button>Test1</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="child-flex"> 
 
     <div class="child-flex-items flex-center"> 
 
     <div class="img-container"></div> 
 
     </div> 
 
     <div class="child-flex-items flex-direction-column"> 
 
     <div class="item-header"> 
 
      <h8>Test Header</h8> 
 
     </div> 
 
     <div class="content-item"> 
 
      <p> Lorem ipsum dolor sit a nisi</p> 
 
     </div> 
 
     <div class="button-container"> 
 
      <button>Test1</button> 
 
      <button>Test1</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="child-flex"> 
 
     <div class="child-flex-items flex-center"> 
 
     <div class="img-container"></div> 
 
     </div> 
 
     <div class="child-flex-items flex-direction-column"> 
 
     <div class="item-header"> 
 
      <h8>Test Header</h8> 
 
     </div> 
 
     <div class="content-item"> 
 
      <p> Lorem ipsum dolor sit a nisi</p> 
 
     </div> 
 
     <div class="button-container"> 
 
      <button>Test1</button> 
 
      <button>Test1</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <div class="child-flex"> 
 
     <div class="child-flex-items flex-center"> 
 
     <div class="img-container"></div> 
 
     </div> 
 
     <div class="child-flex-items flex-direction-column"> 
 
     <div class="item-header"> 
 
      <h8>Test Header</h8> 
 
     </div> 
 
     <div class="content-item"> 
 
      <p> Lorem ipsum dolor sit a nisi</p> 
 
     </div> 
 
     <div class="button-container"> 
 
      <button>Test1</button> 
 
      <button>Test1</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>