Flexbox Vertical Align Child Top, Center Another

flexbox vertical align child top, center another

No, not really, not without another wrapper which is a flex-container.

As flexbox is, to a certain extent based on manipulting margins, there is no method (AFAIK, although I'd be interested to find out if there is) to justify-content: center and then align-self a child element to somewhere else other than center.

I'd go with something like this: Add a wrapper to the "content" div, give it flex:1 to fill the remaining space below the header, then make that wrapper display:flex with justify-content:center.

This seems to be the most logical method

.col {  height: 150px;  width: 80%;  margin: 1em auto;  border: 1px solid grey;  display: flex;  flex-direction: column;}.header {  background: lightblue;}.content {  background: orange;}.flexy {  flex: 1;  display: flex;  flex-direction: column;  justify-content: center;  background: plum;}

<div class="col">  <div class="header">Header #2</div>  <div class="flexy">    <div class="content">Lorem Ipsum      <br />Dolor</div>  </div></div>

align flex child at top-center and bottom-center, flexbox

What you are looking for is justify-content: space-between; to align the items until the corners.
Add that to the .container and there you go.

.container{
    /*justify-content: center;*/
    justify-content: space-between;
}

On .item-4 you have align-self: flex-start; but you don't need that. just remove it.

https://jsfiddle.net/q5cw4xvy/2/

To better help you understand flexbox, there is a really nice css-tricks article.

Flexbox vertical align specific content within a wrapper?

This is a sort of a hack, but it works:

1. Remove align-items: center from the wrapper and flex:1 to the flex children left and right

2. Make the inner left and right container a column flexbox and center the h3 and content using justify-content:center

3. Use margin-bottom:auto to push both h3 to the top and allow content to stay at the middle.

See demo below:

.wrapper {  overflow: auto;  border: 1px solid #ccc;  text-align: center;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;}.left,.right {    padding: 5px;    display: flex;    flex-direction: column;    justify-content: center;    flex: 1;}.left h3, .right h3 {    margin-bottom: auto;}.content {    margin-bottom: auto;}

<div class="wrapper">
  <div class="left">    <h3>    Title (should be aligned to top)    </h3>    <div class="content">      left      <br>left      <br>left      <br>left      <br>    </div>  </div>
  <div class="right">    <h3>  Title (should be aligned to top)  </h3>    <div class="content">      right    </div>  </div>
</div>

How to vertically center second child in column of divs

There are several methods, and it depends whether you want to make it work on Internet Explorer 11.

1. Position absolute: https://jsfiddle.net/trcmba5z/

2. Let them be two flex items, top and bottom, with the first one about 0.8 unit tall and the second one 1.2 unit tall: https://jsfiddle.net/Lh5t9zoa/ and let flexbox expand them for you.

3. Add an extra div or h1 at the bottom, and now, tell flexbox to expand the top and bottom flex items as much as possible vertically (using flex: 1 0 auto), and don't expand the middle flex item (using flex: 0 0 auto), and now your links are centered in the page: https://jsfiddle.net/87ohkz0q/

The third method works best on IE 11. Note that the font with 56px is really big on my Mac, so I changed it to 26px.

Vertical align the child elements with different height

Replace your .container style with.

height: 120px;
display: flex;
border: 1px solid gray;
align-items: center;
justify-content: space-between;

Check the snippet

.container {  height: 120px;  display: flex;  border: 1px solid gray;  align-items: center;  justify-content: space-between;}
.title {  font-size: 18px;}
.action-button {  float: right;  height: 50px;  width: 100px;}
.small-screen {  width: 160px;  display: inline-block;}

<div class="container">
  <span class="title">        Card header      </span>
  <button class="action-button">        Action      </button>
</div>
<br />
<div class="container">
  <span class="title small-screen">        Card header title here is longer      </span>
  <button class="action-button">        Action      </button>
</div>

How to vertically center text inside flex element

To center the flex items along the main axis (in your case column/vertically), add justify-content: center; to the container (and erase the flex settings from the children):

#elem1 {  height: 180px;  border: 1px solid #ddd;  display: flex;  flex-direction: column;  justify-content: center;}
.inner_element {  text-align: center;}

<div id="elem1">  <div class="inner_element">aaaa</div>  <div class="inner_element">bbbb</div></div>

---

Related Topics