使用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; …我已经创建了一排项目并使用flex进行了高度匹配.然而,当我只想让它成为自动宽度时,这会导致我在项目中的链接变为全宽.我已经尝试过设置它,display: inline-block但这还没有解决它.
这是一个小提琴:https://jsfiddle.net/v0o2z9g3/2/
.row {
display: flex;
flex-direction: row; }
.col {
display: flex;
flex-direction: column;
padding: 0 0 15px 0;
margin: 0 19px 65px;
width: calc((100% / 3) - 38px);
background: red; }
.col .resource-item__title {
font-weight: bolder; }
.col .resource-item__summary {
margin: 0 0 5px 0; }
.col .resource-item__link {
display: inline-block;
background: yellow;
margin-top: auto; }
.col .resource-item__icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
color: green;
font-size: 22px;
cursor: default; } …我正在尝试使用FlexBox设计子菜单.
FlexBox的默认行为是为所有子元素提供相同的大小.
这会在显示子菜单时导致所有项目展开.
使用Flexbox时有什么可以避免的吗？
Codepen:https://codepen.io/dsomekh/pen/oeogGq
<style>
.single_tag{
display:flex;
flex-direction:column;
margin-right:6px;
background-color:#ADD8E6;
margin-bottom:6px;
padding:2px;
border-radius: 5px;
border:2px solid red;
}
.container{
display:flex;
justify-content:center;
}
.dropdown-content {
display: none;
flex-direction:column;
}
.dropdown-content_second {
display: none;
flex-direction:column;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.single_tag:hover .dropdown-content {
display: flex;
}
</style>
<html>
<div class="container">
<div class="single_tag">First div
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="single_tag">Second div
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link …