align-self:flex start is not sending child element to the top

Question

I'm making an element in javascript and appending it to a flex container. The container I'm appending it to has a button in it and a display none div. I want the element I'm making to be positioned at the top of the div I'm appending it to, and I styled the class it has with align-self: flex-start, but for some reason this is doing nothing. Align-self: flex-end doesn't work either or any of the other align-self's. Here is my code-

// //handler to show text from eventData array
document.addEventListener('click', (e)=> {
    let noEvents = document.getElementsByClassName('no-Events')[0];
    let eventsDescContainer = document.querySelector('.events');

    if(e.target.classList.contains('day')){
        [...eventData['events']].forEach((event)=>{
            if(event['day']===e.target.innerHTML && event['month']===headerMonths.innerHTML && event['year']===headerYears.innerHTML){
                //span element to put Event text into
                let eventDesc = `${event['description']}`
                const span = document.createElement('span');
                let EventText = document.createTextNode(eventDesc);;
                //clear previous events message
                noEvents.style.display='none';
                clearEventText();

                //append to container
                span.appendChild(EventText)
                span.classList.add('event-desc', 'event-message');
                eventsDescContainer.appendChild(span);
            }  else {
                clearEventText();
                noEvents.style.display='initial';
                noEvents.innerHTML = `There are no events on ${headerMonths.innerHTML} ${e.target.innerHTML} ${headerYears.innerHTML}`;
            }
        });
    }
});




 <div class='events'>
                     //this span is hidden
                    <span class='no-Events event-message'>There are no events today</span>     //this button has no styles on it, it is just plain html 
                    <button class='show-event-form rotate'>Add new event</button>
                    //This is the span I want to go at the top of the container but it is positioned after the button
                    <span class='event-desc event-message'>text</span>
                </div>

Here is the html for the container and the span I created. The button has no styles.

.events{
    height: 100%;
    display:flex;
    flex-direction: column;
    align-items: center; /*center children vertically*/
    overflow-y: auto;
}

.events .event-message {
    align-items: center;
    width: 80%;
    text-align: center;
    margin: 20px auto;
    padding: 10px 0;
    background-image: linear-gradient(to right, #649173, #dbd5a4 );
    border-radius: 3px;
    box-shadow: 3px 6px 10px #393a39;
}
//this is not working
.event-desc {
    align-self: flex-start;
}

Hi - you can embed CSS, JS and HTML directly into your question. Could you do that - it makes it much easier to answer your question. — dwjohnston, Dec 02 '18 at 00:49

score 0 · Answer 1 · answered Dec 02 '18 at 00:49

0

I changed the direction of the flex-direction in my container to flex-direction:column-reverse and justify-content:start to send it to the top of my container and this solved my problem. I'm still not sure why align-self was working though.

answered Dec 02 '18 at 00:49

icewizard

133
1
13

score 0 · Answer 2 · answered Dec 02 '18 at 01:11

You have this in your code:

.events{
    height: 100%;
    display:flex;
    flex-direction: column;
    align-items: center; /*center children vertically*/
    overflow-y: auto;
}

Your comment suggests a misconception: align-items: center does not center the children vertically in a column-direction container. It centers them horizontally.

The justify-* properties apply to the main axis.

The align-* properties apply to the cross axis.

These axes shift, depending on flex-direction.

Here's a complete explanation:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

align-self:flex start is not sending child element to the top

2 Answers2