<html>
<div class="box1">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="box2">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</html>
<style>
.box1{
/* display: flex; */ /* 块级元素flex布局 */
/* display: inline-flex; */ /* 行列元素flex布局 */
/* display: flex;
flex-direction:row; */
/* 父级左浮动 顺序*/
/* display: flex;
flex-direction:row-reverse; */
/* 子级倒序 右浮动 */
/* display: flex;
flex-direction:column; */
/* 子级随标签元素（块级或者行内） 顺序 */
/* display: flex;
flex-direction: column-reverse; */
/* 子级随标签元素（块级或者行内） 倒序 */
/* display: flex;
flex-wrap: nowrap; */
/* 不换行 不管子级的宽度，即使子级宽度超过父级宽度也不会换行。*/
/* display: flex;
flex-wrap: wrap; */
/* 换行，超过父级就换行。 */
/* display: flex;
flex-wrap: wrap-reverse; */
/* 只要换行子级就倒序排列，不换行还是顺序 */
/* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
/* display:flex; */
/* flex-flow: column wrap; */
/* display: flex;
justify-content:flex-start; */
/* 左对齐（倒序） */
/* display: flex;
justify-content:flex-end; */
/* 右对齐（顺序） */
/* display: flex;
justify-content:center; */
/* 居中（顺序） */
/* display: flex;
justify-content:space-between; */
/* 两端对齐，项目之间的间隔都相等。 */
/* display: flex;
justify-content:space-around; */
/* 每个项目两侧的间隔相等。 */
}
.box1span{
text-align: center;
border:1px solid #ccc;
}
.box2{
display: flex;
width:100%;
}
.box2 span{
flex-grow: 1;
width:0;
bordeR:1px solid #f00;
}
</style>