我有三个元素,我试图在我的布局中对齐.
首先,我有一个div反馈,然后是搜索输入,然后是div元素的建议.
我希望第一个和最后一个元素的宽度为20%,搜索输入的宽度为60%.使用Flexbox我实现了我想要的.
但是有一个功能可以将所有div增加到最高元素.这意味着当弹出搜索结果时,反馈和建议元素的高度会随着搜索div的增加而产生混乱的布局.
有没有一个技巧不增长具有最高元素的div？只是使div(#feedback和#suggestions)具有内容的高度？
#container_add_movies {
display: flex;
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}<div id='container_add_movies'>
<div id='feedback'>
Feedback
</div>
<div id='search'>
Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>
</div>
<div id='suggestions'>
Suggestions
</div>
</div>使用flex align-*属性时,flex-start和之间有什么区别baseline？
下面的代码片段为align-self: flex-start和提供了相同的输出align-self: baseline.
在哪些情况下会align-self: flex-start和align-self: baseline不同的表现？
.flex-container {
color: white;
display: -webkit-flex;
display: flex;
width: 350px;
height: 200px;
background-color: yellow;
}
.flex-item {
background-color: green;
width: 50px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch; …