trung tâm Flexbox và dưới mục ngay

Question

Tôi đang cố gắng để đạt được các kết quả sau đây sử dụng flexbox:

tôi đã cố gắng với html sau nhưng tôi không thể có được nó để làm việc.

<div class=" flex-center"> 
    <div class="flex-item-center"> 
     <p> 
      Some text in box A 
     </p> 
    </div> 
    <div class="flex-item-bottom"> 
     <p>Some text in box B....</p> 
    </div> 
</div> 

CSS:

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

.flex-item-bottom { 
    align-self: flex-end; 
} 

Làm thế nào tôi có thể làm cho nó trông giống như hình ảnh?

Answer 1

Tôi đã thực hiện một giải pháp khả thi.

.flex-center { 
 
    background-color: #739FD0; 
 
    color: #000000; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-content: center; 
 
    align-items: center; 
 
    height: 400px; 
 
} 
 
.flex-center-bottom { 
 
    background-color: #739FD0; 
 
    color: #000000; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-end; 
 
    align-content: center; 
 
    align-items: center; 
 
} 
 
.flex-item-center { 
 
    border: solid 2px #4675AA; 
 
    order: 0; 
 
    flex: 0 1 auto; 
 
    align-self: center; 
 
} 
 
.flex-item-bottom { 
 
    border: solid 2px #4675AA; 
 
    order: 1; 
 
    flex: 0 1 auto; 
 
    align-self: flex-end; 
 
}

<div class="flex-center"> 
 
    <div class="flex-item-center"> 
 
    <p>DROP FILES HERE</p> 
 
    </div> 
 
</div> 
 
<div class="flex-center-bottom"> 
 
    <div class="flex-item-center"> 
 
    <p>Hint: You can also drop files in the all files page</p> 
 
    </div> 
 
</div>

Cập nhật 2017: Tested trong Google Chrome phiên bản 62.0.3202.89 (Xây dựng oficial) (32 bit).

.flex-center, 
 
.flex-center-bottom { 
 
    align-items: center; 
 
    background-color: #739FD0; 
 
    color: #000000; 
 
    display: flex; 
 
} 
 

 
.flex-center { 
 
    height: 400px; 
 
    justify-content: center; 
 
} 
 

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

 
.flex-item-center { 
 
    border: solid 2px #4675AA; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 1.6em; 
 
    line-height: 1px; 
 
    padding: 0 3px; 
 
}

<div class="flex-center"> 
 
    <div class="flex-item-center"> 
 
    <p>Some text in box A</p> 
 
    </div> 
 
</div> 
 
<div class="flex-center-bottom"> 
 
    <div class="flex-item-center"> 
 
    <p>Some text in box B...</p> 
 
    </div> 
 
</div>

Tôi hy vọng điều này sẽ giúp bạn.

Answer 2

Đây có phải là những gì bạn đang tìm kiếm không? http://jsfiddle.net/DIRTY_SMITH/q12bh4se/6/

body { 
    background-color: lightblue; 
} 

#main { 
    width: 100%; 
    height: 400px; 
    border: 1px solid black; 
    display: -webkit-flex; 
    /* Safari */ 
    -webkit-align-items: flex-start; 
    /* Safari 7.0+ */ 
    display: flex; 
    align-items: flex-start; 
} 

#main div { 
    -webkit-flex: 1; 
    /* Safari 6.1+ */ 
    flex: 1; 
} 

.flex-item-center { 
    margin-left: 40%; 
    border-style: solid; 
    -webkit-align-self: center; 
    /* Safari 7.0+ */ 
    align-self: center; 
} 

.flex-item-bottom { 
    border-style: solid; 
    align-self: flex-end; 
}