<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<link rel="stylesheet" href="styles.css">
<style>
.container {
display: flex;
width: 100%; /* 可以根据需要调整容器宽度 */
}
.item {
padding: 20px;
color: white;
text-align: center;
word-break: break-all; /* 强制长单词或URL换行 */
overflow-wrap: break-word; /* 允许长单词内部换行 */
}
/* 设置每个部分的比例 */
.item1 {
background-color: #6a11cb;
flex: 3; /* 第一部分占3份 */
}
.item2 {
background-color: #3498db;
flex: 2; /* 第二部分占2份 */
}
.item3 {
background-color: #2ecc71;
flex: 7; /* 第三部分占7份 */
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Section 1 0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</div>
<div class="item item2">Section 2</div>
<div class="item item3">Section 3</div>
</div>
</body>
</html>