1、文字自適應寬度
<body>
<div class="box">
<div>大風起兮雲飛揚</div>
<div>安得猛士兮守四方</div>
<div>威加海內兮歸故鄉</div>
</div>
</body>
.box{
border:1px solid red;
}
.box div:nth-child(1){
background-color: deepskyblue;
}
.box div:nth-child(2){
background-color: yellow;
}
.box div:nth-child(3){
background-color: darkcyan;
}
從上面例子可以看出我們的div的寬度是繼承了父級。
如果想要做到如下效果，我們只需簡單幾行代碼即可實現。
關鍵代碼如圖：
.box {
border: 1px solid red;
display: flex;
flex-direction: column;
align-items: flex-start;
}
我們通過flex，改變了次軸的對齊方式，使其重新計算寬度。