一. 需求
為開發一個空狀態通用組件，需要將所有內容水平垂直居中，還需要橫向縱向排列，故選擇flex布局。
- 組件內容分為三部分，圖片、文字、其他（插槽）
- 默認狀態，組件排列方式為縱向，圖片307*145，所有內容水平垂直居中。
- 容器寬高任一小於330px，假設寬大於高組件排列方式變為橫向，圖片大小變為70px；否則維持默認。
- 容器寬高任一小於120px，組件只顯示文字和其他。
二. 設計
- 組件最外層為自適應寬高，完全由內容撐開。
- 開放屬性：
1.類別：默認、橫向、縱向、只有文字
2.內置圖片高度
3.內置圖片選擇
4.文字替換
三. 問題及解決方案
問題：當組件內容寬高大於組件設置的寬高，會導致內容顯示不完整，Flex 子元素居中，溢出滾動后被裁切的問題。
個人解決方案：使用兩層flex，外層只設置align-items: center;，內層設置align-items: center;justify-content: center;flex-shrink: 0;居中和不讓內容縮放,重點設置margin: auto;設置居中，消除flex影響。
四. demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex容錯</title>
</head>
<style>
.warp {
overflow: auto;
width: 100%;
height: 100%;
border: 1px solid black;
}
.flex1 {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.flex2 {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: auto;
flex-direction: column;
}
.clear {
flex-shrink: 0;
}
.image {
border: 1px solid black;
}
.text {
border: 1px solid black;
}
.other {
border: 1px solid black;
}
</style>
<body>
<h2>消除flex居中后,子元素內容顯示不完整 </h2>
<div class="warp">
<div class="flex1">
<div class="flex2">
<div class="clear">
<div class="image"><img src="http://www.baidu.com/img/flexible/logo/pc/result.png" alt=""></div>
</div>
<div class="clear">
<div class="text">提示文字</div>
</div>
<div class="clear">
<div class="other">其他</div>
</div>
</div>
</div>
</div>
</body>
</html>