javascript - align-self:flex start 没有将子元素发送到顶部
问题描述
我正在用 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 和我创建的跨度。该按钮没有样式。
.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;
}
解决方案
我将容器中 flex-direction 的方向更改为 flex-direction:column-reverse 和 justify-content:start 以将其发送到容器顶部,这解决了我的问题。我仍然不确定为什么 align-self 正在工作。
推荐阅读
- jquery - Jquery 将新行追加到 html 表
- laravel-5 - Laravel5 中动态填充的选择菜单
- javascript - 为什么我的 fetch 请求被调用了两次?
- android - Android 应用中的“Google Now”语音搜索
- sql - ORA-00936: 缺少 WHERE (ID Mod 2) = 0 的表达式;
- python - 我需要帮助了解 python 中的 map 函数
- go - 使用服务帐户访问 Google Reseller API
- gitlab - 如何持续部署 Gitlab?
- java - 连接 Netbeans 和 MySQL 但出现大整数错误
- razorengine - MVC Razor 本地化如何