网站建设 网站建设技术 网页设计 html/css
flex布局案例实现两边对齐，自动间距分配
人浏览 发布时间：2021-10-26
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style type=text/css .tabs .tabs-title { display: flex; padding:3px; background:#666; justify-content: space-between; } .tabs { margin: auto; width: 640px; height: auto; } .tabs .tabs-title .title-item { display: flex; background:#096 } /style /head body div class=tabs div class=tabs-title div class=title-item首页/div div class=title-item首页/div div class=title-item首页/div div class=title-item首页/div /div /div /body /html 结果：...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.tabs .tabs-title {
display: flex;
padding:3px;
background:#666;
justify-content: space-between;
}
.tabs {
margin: auto;
width: 640px;
height: auto;
}
.tabs .tabs-title .title-item {
display: flex;
background:#096
}
</style>
</head>
<body>
<div class="tabs">
<div class="tabs-title">
<div class="title-item">首页</div>
<div class="title-item">首页</div>
<div class="title-item">首页</div>
<div class="title-item">首页</div>
</div>
</div>
</body>
</html>
结果：
结果：
（编辑：360°搜索建站）