Flexbox wrap - different alignment for last row

17,577

Solution 1

You can try adding some left margin to push your .second element to the right:

.second {
    margin-left: auto;
}

.container {
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.first {
  background-color: yellow;
  width: 200px;
  height: 100px;
}
.second {
  background-color: blue;
  width: 200px;
  height: 100px;
  margin-left: auto;
}
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

Or, similarly, justify all elements to the right but push .first element to the left:

.container {
    justify-content: flex-end;
}
.first {
    margin-right: auto;
}

.container {
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.first {
  background-color: yellow;
  width: 200px;
  height: 100px;
  margin-right: auto;
}
.second {
  background-color: blue;
  width: 200px;
  height: 100px;
}
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

Solution 2

I found a solution but it is rather "hacky" in nature (see demo here, explanation later), in the sense that it requires you to explicitly know the width of the parent container which will trigger a layout change based on @media.

The reason why your code is not working is because of the confusion over how align-self works. In the flexbox model, "align" refers to alignment along the cross-axis (i.e. in a conventional sense of a "row" layout direction, that will refer to vertical alignment), while "justify" refers to alignment along the main axis (i.e. the row). To better explain my point, I hereby attach an image made by Chris Coyier from his flexbox guide:

align-self description

Therefore, align-self: flex-start means telling the .first to align to the top of the container, and align-self: flex-end means telling .second to align to the bottom of the container. In this case, since you have not declared an explicit height for the parent, the parent will take on the height of its tallest child. Since both .first and .second are 100px tall, the parent will also have a computed height of 100px, therefore making no difference in the alignment (because both with be flush with the start and end of the cross axis).

A hack would be switching the flex-direction to row, with the following restrictions: You know how wide your container will be, or the explicit widths of its children. In this case the breakpoint will be at 400px, where .first and .second will intersect each other.

.container {
    width:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100px;
}

.first {
    background-color: yellow;
    width: 200px;
    height: 100px;
    align-self: flex-start;
}

.second {
    background-color: blue;
    width: 200px;
    height: 100px;
    align-self: flex-end;
}

@media screen and (max-width: 400px) {
    .container {
        height: 200px;
    }
}

Then again, here is a proof-of-concept fiddle, modified from your original one: http://jsfiddle.net/teddyrised/cncozfem/2/

Share:
17,577

Related videos on Youtube

Aleks G
Author by

Aleks G

My name is Aleks Gekht. I have over 20 years of IT experience, in software development, databases, system administration, business and system analysis and project and programme management. I am Prince 2 certified and have technical hands-on experience with PHP, Java, Perl, VB and VB.NET, C/C++, Pascal MySQL, PostgreSQL, Oracle, DB2, MSSQL HTML/CSS/JavaScript Windows, UN*X/Linux, OSX, Android, iOS With most recent being PHP, Java, C, PostgreSQL, Web development, Android and iOS. I run a small outsourcing company with technical resources located in Georgia, Ukraine and Russia. I am available myself for freelance and contract assignments and can attend to your outsourcing needs providing technical resources at very reasonable rates on a very short notice. I am dual citizen of USA and United Kingdom and fluent in English, Russian and Ukrainian languages. Please contact me for more information: http://www.aagproservices.com aleks [at] aagproservices.com +44 1483 723 820 SOreadytohelp

Updated on June 27, 2022

Comments

  • Aleks G
    Aleks G almost 2 years

    I'm using flex box to align two items to left and right of the container, while vertically centre-aligning them. Here's a very simple example of what I'm trying to achieve.

    HTML:

    <div class="container">
        <div class="first"></div>
        <div class="second"></div>
    </div>
    

    CSS:

    .container {
        width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .first {
        background-color: yellow;
        width: 200px;
        height: 100px;
    }
    
    .second {
        background-color: blue;
        width: 200px;
        height: 100px;
    }
    

    Here's the jsfiddle of the example.

    This works perfectly well if the screen is wide enough to fit both internal divs on one row. However when the screen size is small (e.g. a mobile phone) and the divs wrap onto the second line, the second one also becomes aligned to the left side (i.e. flex-start). How can I force the second div to always be aligned against the right border, regardless of whether it's on the first row or wrapped onto the second one?

    EDIT: In the example, I assigned fixed width to the two child elements - this is for simplicity only. In the real life application, all widths are dynamically changing based on the content read from the database at run-time. Hence, any solution that's based on fixed sizes will not work.

  • Aleks G
    Aleks G over 9 years
    it requires you to explicitly know the width of the parent container which will trigger a layout change - this part makes the solution unworkable, as the size of the child containers is not fixed and is adjusted dynamically based on their content. Hence any solution that's based on any fixed sizes isn't going to work
  • Terry
    Terry over 9 years
    Then you're out of luck. Also, it helps to specify that in your original question. You gave your two child elements explicit widths. If the widths are dynamic, why can't you use the good old float?
  • George Pligoropoulos
    George Pligoropoulos about 9 years
    Is this a generally accepted way to self justify content in a flexbox? I see there is a justify-self thing but it does not seem to have any effect on chrome for instance
  • Oriol
    Oriol about 9 years
    @GeorgePligor There is no justify-self. There is justify-content, which applies to flex containers and defines how to distribute space between and around flex items along the main-axis. There is align-items, which applies to flex containers and sets the alignment of flex items of the same way as justify-content but in the perpendicular direction. And there is align-self, which applies to flex items and overrides align-items.
  • George Pligoropoulos
    George Pligoropoulos about 9 years
    Thank you for explaining. I was confused by Webstorm IDE which provides a justify-content property with autocomplete. So in order to achieve justification as [XXX X] or [XX XXX] or [X XXX X] etc. the trick is in your answer with margin-left or margin-right set to auto accordingly?
  • Oriol
    Oriol about 9 years
    @GeorgePligor Yes. Auto margins absorb extra space in the corresponding dimension and can be used for alignment and to push adjacent flex items apart (spec).

Related