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，改变了次轴的对齐方式，使其重新计算宽度。