centrum schematu flexbox i dolny prawy poz

Question

Próbuję osiągnąć następujący wynik za pomocą schematu flexbox:

Próbowałem z następujący kod HTML, ale nie mogę zmusić go do pracy.

<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; 
} 

Jak mogę zrobić to patrzeć jak na zdjęciu?

Answer 1

Zrobiłem rozwiązanie możliwe.

.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>

Aktualizacja 2017: Testowany w Google Chrome w wersji 62.0.3202.89 (Build oficial) (32 bity).

.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>

Mam nadzieję, że to pomaga.

Answer 2

Czy tego właśnie szukasz? 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; 
}