flex 布局相关问题

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>