align-self:flex start 没有将子元素发送到顶部答案

【问题标题】：align-self:flex start is not sending child element to the topalign-self:flex start 没有将子元素发送到顶部
【发布时间】：2018-12-02 00:28:25
【问题描述】：

我正在用 javascript 制作一个元素并将其附加到一个 flex 容器中。我将其附加到的容器中有一个按钮和一个不显示 div。我希望我正在制作的元素位于要附加它的 div 的顶部，并且我使用 align-self: flex-start 设置了它的类的样式，但由于某种原因，这什么也没做。 Align-self：flex-end 不能工作或任何其他 align-self 的。这是我的代码-

// //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>

这是容器的 html 和我创建的 span。该按钮没有样式。

.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;
}

【问题讨论】：

嗨 - 您可以将 CSS、JS 和 HTML 直接嵌入到您的问题中。你能做到吗？这样更容易回答你的问题。

标签： javascript html css ecmascript-6 flexbox

【解决方案1】：

我将容器中 flex-direction 的方向更改为 flex-direction:column-reverse 和 justify-content:start 以将其发送到容器顶部，这解决了我的问题。我仍然不确定为什么 align-self 工作。

【讨论】：

【解决方案2】：

你的代码中有这个：

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

您的评论暗示了一个误解：align-items: center 确实不在列方向容器中垂直居中子项。它水平居中。

justify-* 属性适用于主轴。

align-* 属性适用于横轴。

这些轴移动，取决于flex-direction。

这里有一个完整的解释：

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

【讨论】：