http://codepen.io/smellyshovel/pen/aNrgMK
As you can see, now everything is fine (chrome 50.0.2).
But it is worth doing so ...
http://codepen.io/smellyshovel/pen/BKeggj
... and shorter flash devices have empty spaces on the left. How to get rid of this behavior?

<section class="fashbox"> <div class="flash-notice"> <span class="text">You have been signed up successfully </span> <span class="close"> X </span> </div> <div class="flash-notice"> <span class="text">You have been signed up successfully!</span> <span class="close"> X </span> </div> <div class="flash-alert"> <span class="text">You have been signed up successfully!</span> <span class="close"> X </span> </div> </section>

    1 answer 1

    This moment was overlooked: flex-flow: column . It is not justify-content: flex-end .

    Therefore, in order to solve the nuance, you need to add align-items: flex-end / flex-start / center to the flex box (section.fashbox), then our buttons will occupy exactly that space, how much they should occupy if they are inline elements.

    If flex-direction: column does not indicate the side of the element clamping , by default they will stretch across the entire width of the block.

    Or the necessary .flash- buttons to set the align-self + side of the clamp .

    • Thank you very much. I really didn’t think that if I specified a flex-flow: column , then align-items: flex-end would now align horizontally. Now everything works as it should, but: I was embarrassed by your further words "exactly the space that they should occupy, be they inline-elements". I now need to tell each flash display: inline-flesh ? And further. "If in the flex-direction does not indicate the side of the clamp ..." You probably wanted to skzat, "in flex-flow . - smellyshovel
    • i.e. display: inline-flex - smellyshovel
    • And something else. Please look at this screenshot (from mobile). What can explain the fact that the close button with each additional line of text shifts more and more to the right and to the right? imgur.com/w6r6KLF - smellyshovel
    • 1. I now need to point each flash display: inline-flex - no, not necessary. 2. flex-direction: row / column, flex-flow: row / column wrap / nowrap. That is, in flex-flow you can specify two parameters at once: direction and gap. 3. Please look at this screenshot - you need a link or code. - NeedHate
    • Please: codepen.io/smellyshovel/pen/xVoWdL (please note that you need to create a small width (when dragging, you will see how the cross shifts to the side)). - smellyshovel