flex 布局,父元素无法被撑开出现滚动条:
<div style="width:100%;height:100px;display: flex;">
<div style="width:2000px;height:100px;background: antiquewhite;"></div>
<div style="flex:100px;height:100px;background: aquamarine;"></div>
</div>
问题:父元素无法被撑开出现横向滚动条。
解决方法:分别给子元素增加属性 flex-shrink:0,确保父元素不够大时子元素不会被压缩,从而撑开父元素的宽度出现横向滚动条。
flex 布局,父元素高度 auto,由其中一个子元素撑开,另一个子元素高度无法自动撑满:
.container {
width:100%;
display: flex;
}
.left-box {
width: 20px;
background: antiquewhite;
}
.right-box {
width: 20px;
background: aquamarine;
}
<div class="container">
<div class="left-box">哈哈哈哈哈哈哈哈</div>
<div class="rightt-box">哈哈</div>
</div>
问题:flex 布局,父元素高度 auto,由其中一个子元素撑开,另一个子元素高度无法自动撑满。
解决方法:将父元素的 aligin-items 属性设为 stretch。
flex 布局下希望某个子元素在主轴上单独左对齐或者右对齐:
解决方法:给子元素设置 margin-right: auto
或者 margin-left: auto
。
.items {
display: flex;
align-items: center;
justify-content: flex-start;
}
.last-item {
margin-left: auto;
}
<div class="items">
<div>1</div>
<div>2</div>
<!-- 这个子元素单独右对齐 -->
<div class="last-item">3</div>
</div>