<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: flex;
flex-direction: row; /*主轴方向*/
justify-content: start; /*主轴对齐方式*/
}
.text1 {
background-color: aqua;
padding: 5px;
margin: 5px;
}
.text2 {
background-color: chartreuse;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<span class="text1">文字1部分</span>
<span class="text2">文字2部分</span>
</div>
</body>
</html>显示为：
加上交叉轴的对齐方式
.container {
display: flex;
flex-direction: row; /*主轴方向*/
justify-content: start; /*主轴对齐方式*/
align-items: start;/*交叉轴的对齐方式*/
}显示为：
加上flex-grow:10:
.text1 {
background-color: aqua;
padding: 5px;
margin: 5px;
flex-grow: 10;
}
.text2 {
background-color: chartreuse;
padding: 5px;
flex-grow: 10;
}显示为：
修改这个值为：
.text1 {
background-color: aqua;
padding: 5px;
margin: 5px;
flex-grow: 10;/*决定了在剩余空间分配时，弹性盒子子项在主轴上增长的比率*/
}
.text2 {
background-color: chartreuse;
padding: 5px;
flex-grow: 5;/*决定了在剩余空间分配时，弹性盒子子项在主轴上增长的比率*/
}显示为：
.text1 {
background-color: aqua;
padding: 5px;
margin: 5px;
flex-shrink: 10;/*属性定义了在空间不足时，弹性盒子子项在主轴上收缩的比率。*/
flex-basis: 200px;
}
.text2 {
background-color: chartreuse;
padding: 5px;
flex-shrink: 5;/*属性定义了在空间不足时，弹性盒子子项在主轴上收缩的比率。*/
flex-basis: 200px;
}空间充足时：
剩余空间不足时：
评论