flex佈局demo
示例一：html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.outer {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border: 1px solid #aaa;
box-sizing: border-box;
}
.header {
width: 100%;
height: 25px;
text-align: center;
border: 1px solid #ccc;
box-sizing: border-box;
}
.content {
flex: 1;
min-height: 0;
height: 100%;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="header">header</div>
<div class="content">
first<br/> content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>
content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>contentcontentcontent<br/>
contentcontent<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>
content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>content<br/><br/>contentcontentcontent<br/>
content
end
</div>
</div>
</body>
</html>
示例二：web
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="xhh">
<title>flex</title>
<style>
#payList {
width: 830px;
height: 270px;
border: 1px solid #d7d7d7;
overflow-y: auto;
padding: 10px 5px 5px 15px;
font-size: 14px;
font-family: "Microsoft Yahei";
}
#payList .payUl {
margin: 0;
padding: 0;
width: 100%;
list-style: none;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
#payList .payUl .listItem {
display: -webkit-flex;
display: flex;
flex: 1;
min-height: 40px;
cursor: pointer;
}
#payList .payUl .item-welt {
display: -webkit-flex;
display: flex;
}
#payList .payUl .item-welt .item-welt-line {
position: relative;
width: 2px;
margin-left: 10px;
margin-right: 10px;
background-color: #f3f3f3;
}
#payList .payUl .listItem:last-child .item-welt-line {
height: 0;
}
#payList .payUl .item-welt-line::after {
content: "";
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
width: 12px;
height: 12px;
top: 0%;
left: 50%;
transform: translateX(-50%);
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #f0f0f0;
}
#payList .listItem .item-info {
display: -webkit-flex;
display: flex;
margin-left: 10px;
margin-top: 0;
}
#payList .listItem .item-info > p {
margin: 0 2px;
}
#payList .listItem .item-info > div {
-webkit-flex: 1;
flex: 1;
}
#payList .item-info-time,
#payList .item-info-process {
color: #949494;
}
#payList .item-info-person {
color: #00f;
}
</style>
</head>
<body>
<div id="payList">
<ul class="payUl">
<li class="listItem">
<div class="item-welt">
<div class="item-welt-line">
</div>
</div>
<div class="item-info">
<p class="item-info-time">
2017-03-09 00:00:00
</p>
<p class="item-info-person">
system
</p>
<p class="item-info-process">
【普通投訴處理中心】【審批認可】
</p>
<div class="item-info-content">
當即處理。當即處理。-----
</div>
</div>
</li>
<li class="listItem">
<div class="item-welt">
<div class="item-welt-line">
</div>
</div>
<div class="item-info">
<p class="item-info-time">
2017-03-09 00:00:00
</p>
<p class="item-info-person">
system
</p>
<p class="item-info-process">
【普通投訴處理中心】
</p>
<div class="item-info-content">
當即處理。當即處理。當即處理。當即處理.當即處理。當即處理當即處理。當即處理當即處理。當即處理當即處理。當即處理當即處理。當即處理當即處理。當即處理當即處理。當即處理當即處理。當即處理當即處理。當即處理當即處理。當即處理當即處理。當即處理-----
</div>
</div>
</li>
<li class="listItem">
<div class="item-welt">
<div class="item-welt-line">
</div>
</div>
<div class="item-info">
<p class="item-info-time">
2017-03-09 00:00:00
</p>
<p class="item-info-person">
system
</p>
<p class="item-info-process">
【普通投訴處理中心】【審批認可】
</p>
<div class="item-info-content">
當即處理。當即處理。-----
</div>
</div>
</li>
<li class="listItem">
<div class="item-welt">
<div class="item-welt-line">
</div>
</div>
<div class="item-info">
<p class="item-info-time">
2017-03-09 00:00:00
</p>
<p class="item-info-person">
system
</p>
<p class="item-info-process">
【普通投訴處理中心】【審批認可】
</p>
<div class="item-info-content">
當即處理。當即處理。-----
</div>
</div>
</li>
<li class="listItem">
<div class="item-welt">
<div class="item-welt-line">
</div>
</div>
<div class="item-info">
<p class="item-info-time">
2017-03-09 00:00:00
</p>
<p class="item-info-person">
system
</p>
<p class="item-info-process">
【普通投訴處理中心】【審批認可】
</p>
<div class="item-info-content">
提價了訂單的差評賠款單
</div>
</div>
</li>
<li class="listItem">
<div class="item-welt">
<div class="item-welt-line">
</div>
</div>
<div class="item-info">
<p class="item-info-time">
2017-03-09 00:00:00
</p>
<p class="item-info-person">
xhh
</p>
<p class="item-info-process">
【普通投訴處理中心】【審批認可】
</p>
<div class="item-info-content">
提價了訂單的差評賠款單
</div>
</div>
</li>
<li class="listItem">
<div class="item-welt">
<div class="item-welt-line">
</div>
</div>
<div class="item-info">
<p class="item-info-time">
2017-03-09 00:00:00
</p>
<p class="item-info-person">
system
</p>
<p class="item-info-process">
【普通投訴處理中心】【審批認可】
</p>
<div class="item-info-content">
提價了訂單的差評賠款單
</div>
</div>
</li>
<li class="listItem">
<div class="item-welt">
<div class="item-welt-line">
</div>
</div>
<div class="item-info">
<p class="item-info-time">
2017-03-09 00:00:00
</p>
<p class="item-info-person">
system
</p>
<p class="item-info-process">
【普通投訴處理中心】【審批認可】
</p>
<div class="item-info-content">
提價了訂單的差評賠款單
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
相關文章
- 1. flex佈局實例demo全解
- 2. Flex佈局和Grid佈局
- 3. CSS佈局之flex佈局
- 4. Flex佈局（彈性佈局）
- 5. css佈局——flex佈局
- 6. 前端佈局-----flex佈局
- 7. CSS 佈局 （Flex 佈局）
- 8. flex佈局（彈性佈局）
- 9. Flex 佈局
- 10. flex 佈局
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • JDK13 GA發佈：5大特性解讀
- • 再有人問你分佈式事務，把這篇扔給他
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. flex佈局實例demo全解
- 2. Flex佈局和Grid佈局
- 3. CSS佈局之flex佈局
- 4. Flex佈局（彈性佈局）
- 5. css佈局——flex佈局
- 6. 前端佈局-----flex佈局
- 7. CSS 佈局 （Flex 佈局）
- 8. flex佈局（彈性佈局）
- 9. Flex 佈局
- 10. flex 佈局