I'm trying to achieve the following result using flexbox: 
I tried the with the following html but I can't get it to work.
<div> <div> <p> Some text in box A </p> </div> <div> <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; } How can I make it look like the image?
4 Answers
I've made a posible solution.
.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> <div> <p>DROP FILES HERE</p> </div> </div> <div> <div> <p>Hint: You can also drop files in the all files page</p> </div> </div>Update 2017: Tested in Google Chrome Versión 62.0.3202.89 (Build oficial) (32 bits).
.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> <div> <p>Some text in box A</p> </div> </div> <div> <div> <p>Some text in box B...</p> </div> </div>I hope this helps you.
2Is this what you are looking for?
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; } Try:
#main-wrapper { background: blue; width: 100%; height: 100%; min-height: 300px; display: flex; align-items: center; } .x-center { display: flex; justify-content: center; } .y-center { flex: 1; } .x-right { justify-content: flex-end; } .y-bottom { align-self: flex-end; } .small-div { padding: 10px; }<div> <div>Center center</div> <div>Bottom Right</div> </div>Notes:
The align-self won't work for IE10 or below. Anybody know how to make the center div a bit more to the left without position relativing it? Thanks
In Bootstrap 4.x you can use the utility classes
<link href="" rel="stylesheet" /> <div> <div> <div> <div> <div>center center</div> </div> <div> <div>right bottom</div> </div> </div> </div> </div>EDIT
Since I received a couple downvotes I believe a review is in order.
To me the above answer is still valid, however I understand it's not clear it requires some height.
How this height is achieved doesn't really matter. Either you set it fixed in CSS on a wrapper or for the code snippet's sake we set the document's height to make it responsive.
If the "center content" takes up the space in height, the "bottom content" can be positioned absolute, so it doesn't add height. All what's left is to make sure it covers the full width and positions from the bottom.
html, body { height: 100%; } /* can be anything that generates height */<link href="" rel="stylesheet" /> <div> <div>center center</div> </div> <div> <div>right bottom</div> </div>So functionality wise, there's no additional CSS required in Bootstrap.
