cc分享java：php中PC 和移動端 flex 通用佈局解決方案

阿新 • • 發佈：2020-06-29

1.flex 佈局常用屬性
- 宣告flexBox容器
  display: flex;
- 主軸方向：預設行方向
  flex-direction: row;
- 主軸上的專案是否換行
  flex-wrap: nowrap/wrap;
- 簡寫：flex-flow:flex-direction flex-wrap;
  flex-flow: row nowrap;
- 當主軸上存在剩餘空間時，控制空間在專案上的分配方案
  justify-content: flex-start;
  justify-content:flex-end;
  justify-content:center;
- 僅適用於多行容器，控制專案的對齊方式
  
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
- 控制所有專案在交叉軸上的對齊方式:
  align-items: stretch;預設值
  align-items: flex-start/center/flex-end
- 設定專案在主軸空間上的增長因子：flex-grow: 2
  1. .container > .item:first-of-type {
  2. /* 第一個增長因子2，第2個和第3個是1，增長因子之和:　2 + 1 + 1 = 4 */
  3. /* 120 / 增長因子之和4 = 30px */
  4. flex-grow: 2;
  6. flex-grow: 0.5;
  7. /* 增長因子和: 0.5 + 1 + 1 = 2.5 */
  8. /* 120px / 2.5 = 48px */
  9. /* 第2個，第3個: 108px */
  10. /* 第1個最終是84px */ }
- 設定專案在主軸空間上的收縮因子：flex-shrink: 1;
  1. .container > .item {
  2. /* 收縮因子有效的前提是，所有專案寬度之和必須大於主軸上的當前空間大小 */
  3. width: 160px;
  4. /* 不收縮 */
  5. flex-shrink: 0;
  6. /* 收縮,預設值是1，允許收縮填充主軸全部空間 */
  7. /* 收縮因子之和:　 1 + 1 +1 = 3 */
  8. /* 180 / 3 = 60,每個專案需要消化掉60 */
  9. flex-shrink: 1; }
  11. 收縮因子是小數，例如0.5，必須單獨給專案設定
  12. .container > .item:first-of-type {
  13. /* 收縮因子之和: 0.5 + 1 + 1 = 2.5 */
  14. /* 180px / 2.5 = 72px */
  15. /* 第一個專案： 160 - (72*0.5) = 124px */
  16. /* 第二個專案, 第三個專案: 160 -72 = 88px */
  17. flex-shrink: 0.5;}
- 設定專案在主軸空間上的收縮因子尺寸規則：初始大小 < 基礎尺寸 < 最小寬度
  1. .container > .item {
  2. /* 原始大小，初始大小 */
  3. width: 60px;
  4. /* 基礎尺寸優先順序大於原始大小 */
  5. flex-basis: 80px;
  7. width: 60px;
  8. /* 最小寬度優先順序又大於基礎尺寸 */
  9. min-width: 100px; }
- 增長因子，收縮因子，基礎尺寸屬性的簡寫
  1. .container > .item {
  2. width: 60px;
  3. /* flex:放大因子收縮因子基礎尺寸 */
  4. /* 預設不放大，可收縮，尺寸使用原始大小 */
  5. flex: 0 1 auto；;
  7. /*最常用寫法：可放大、可收縮、尺寸自動 */
  8. flex: 1 1 auto;
  9. /* 等價於 */
  10. flex: 1;
  11. flex: auto;
  13. /* 禁止放大和收縮，儲存原樣 */
  14. flex: 0 0 auto;
  15. flex: none;
  17. /* 恢復原始尺寸 */
  18. /* flex: 0; */
  19. /* 等價於 */
  20. flex: 0 0 0%;
  22. /* 記住常用的值：0,1,auto用法 */
  23. /* 0：全部失效
  24. 1：全部有效
  25. auto:可放大、可縮小、基礎尺寸自動計算*/ }
2.PC 端佈局的通用解決方案

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PC端佈局的通用解決方案</title>
<style>
/* 初始化 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: #666;
text-decoration: none;
}
/* 將body轉為flex */
body {
min-width: 680px;
display: flex;
/* 主軸垂直方向，不換行 */
flex-flow: column nowrap;
}
header,
footer {
height: 50px;
border: solid 1px #000;
}
/* 將頁首轉為flex */
header {
display: flex;
/* 所有專案在交叉軸方向居中顯示 */
align-items: center;
}
header > a {
/* 給每個彈性專案，禁止放大，允許收縮，尺寸給100px */
flex: 0 1 100px;
/* 文字在當前專案中居中 */
text-align: center;
}
/* 設定 LOGO */
header > a:first-of-type {
margin-right: 50px;
}
header > a img:first-of-type {
width: 100%;
height: auto;
padding-left: 20px;
}
header > a:last-of-type {
margin-left: auto;
}
/* 設定滑鼠懸停效果，並忽略LOGO */
header > a:hover:not(:first-of-type) {
color: coral;
}
.container {
display: flex;
min-height: 400px;
/* flex-grow: row nowrap; 預設值*/
margin: 10px auto;
justify-content: center;
}
.container > aside,
.container > main {
border: 1px solid #000;
padding: 10px;
}
.container > aside {
flex: 0 0 200px;
}
.container > aside > h2 {
color: #5184eb;
}
.container > aside > ul {
}
.container > aside > ul li {
list-style: none;
padding: 5px 0px;
line-height: 24px;
text-decoration: grey;
/* 單行文字不換行多餘文字顯示省略號 */
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container > aside > ul li a {
color: gray;
font-size: 14px;
word-wrap: break-word;
word-break: normal;
}
.container > aside > ul li a:hover {
color: #5184eb;
}
.container > main {
flex: 0 0 600px;
margin: 0px 10px;
}
footer {
display: flex;
flex-flow: column nowrap;
text-align: center;
}
</style>
</head>
<body>

<header>
<a href="#"><img src="./static//images/new_logo.png" /></a>
<a href="#">要聞</a>
<a href="#">抗肺炎</a>
<a href="#">北京</a>
<a href="#">娛樂</a>
<a href="#">登入/註冊</a>
</header>

<div class="container">

<aside>
<h2>熱點精選</h2>
<ul>
<li>
<a href="" alt=""
>著名電影表演藝術家於藍逝世享年99歲曾塑造“江姐”等經典形象</a
>
</li>
<li>
<a href="" alt=""
>武漢和北京都採用了所謂的混檢方法這種方法可靠嗎？</a
>
</li>
<li>
<a href="" alt="">章瑩穎案民事訴訟再遭駁回：法官稱心理顧問無責</a>
</li>
<li>
<a href="" alt=""
>著名電影表演藝術家於藍逝世享年99歲曾塑造“江姐”等經典形象</a
>
</li>
<li>
<a href="" alt=""
>武漢和北京都採用了所謂的混檢方法這種方法可靠嗎？</a
>
</li>
<li>
<a href="" alt="">章瑩穎案民事訴訟再遭駁回：法官稱心理顧問無責</a>
</li>
<li>
<a href="" alt=""
>著名電影表演藝術家於藍逝世享年99歲曾塑造“江姐”等經典形象</a
>
</li>
<li>
<a href="" alt=""
>武漢和北京都採用了所謂的混檢方法這種方法可靠嗎？</a
>
</li>
<li>
<a href="" alt="">章瑩穎案民事訴訟再遭駁回：法官稱心理顧問無責</a>
</li>
</ul>
</aside>

<main>
<h2>武漢和北京都採用了所謂的混檢方法這種方法可靠嗎？</h2>
<p>
混檢大幅提升了核酸檢測能力，比如，現在北京的日檢測能力是20多萬，使用這種結合模式，可使日檢測能力在不增加人力物力的情況下，就可以達到200多萬。
新京報快訊
據國家衛健委官方微博訊息，“混檢”有兩種模式。一種是在取樣時，將幾個人如3人或5人分別取樣後，放至同一取樣管中，這種模式也叫做“混合取樣”或稱“混採”，北京多數情況下采用這種模式;另一種則是在實驗室檢測時，將3人或5人的樣本取相同體積混合在一起，也稱“樣本混合“。
從科學角度講，第一種“混採”模式，不會影響核酸檢測的敏感性，後一種將樣本混合檢測的模式，則對檢測敏感性有一定的影響，但影響程度是已知的。
在現場取樣中，如採用“混採”，要注意的是有序安排，如5人一組，每人持各自的條碼，取樣時每採一人，將該人條碼貼至取樣管上，這樣就可有效地避免取樣可能弄混的問題。
分析過程中，如採用“樣本混合”的混檢方案，在混合5人樣本時，也要注意樣本混合過程中，可能存在的樣本弄混問題。
混檢大幅提升了核酸檢測能力，比如，現在北京的日檢測能力是20多萬，使用這種結合模式，可使日檢測能力在不增加人力物力的情況下，就可以達到200多萬。
需要強調的是，對於發熱門診有症狀患者、密切接觸者等高風險人群檢測，還是應該採用單採單檢。對於低風險人群的篩查，則可以優先選擇“混檢”。
</p>
</main>

<aside>
<h2>今日話題</h2>
<ul>
<li>
<a href="" alt="">希臘紅燈區重開，嫖客只能在房間呆15分鐘？假訊息</a>
</li>
<li>
<a href="" alt="">希臘紅燈區重開，嫖客只能在房間呆15分鐘？假訊息</a>
</li>
<li>
<a href="" alt="">希臘紅燈區重開，嫖客只能在房間呆15分鐘？假訊息</a>
</li>
</ul>
</aside>
</div>

<footer>
<p>
php中文網 ©版權所有 (2018-2022) | 備案號:
<a href="">皖ICP-18********</a>
</p>
<p>中國.合肥市政務新區999號 | 電話: 0551-888999**</p>
</footer>
</body>
</html>

pc 端解決方案：

3.移動端的解決方案

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>移動端的解決方案</title>
<link rel="stylesheet" href="static/css/font-icon.css" />
<style>
/* 樣式初始化 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: #666;
text-decoration: none;
}
html {
/* vw：可視區寬度，100指100份 */
/* vh:可視區的高度，100指100份 */
width: 100vw;
height: 100vh;
font-size: 14px;
color: #666;
}
body {
/* 設定最小寬度 */
min-width: 360px;
background-color: #fff;
display: flex;
flex-flow: column nowrap;
}
body > header {
color: white;
background-color: #333;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
width: 100vw;
padding: 0 15px;
}
body > .slider {
height: 180px;
}
body > .slider > img {
/* width: 100%; */
height: 100%;
}
/* 主導航區 */
nav {
height: 200px;
margin-bottom: 10px;
display: flex;
/* 轉為多行容器 */
flex-flow: row wrap;
align-content: space-around;
}
nav div {
width: 25%;
display: flex;
flex-flow: column nowrap;
align-items: center;
}阜新市地暖科技有限責任公司|貴港市形象策劃經銷部|亳州市裝飾設計培訓中心|以殺止殺網|拌稂子網|議論紛紛網|簡歷吧|鍋燒雞網|龍潛鳳採網|雲起龍驤網|一字不苟網|中鴿網
nav > div > a:first-of-type {
text-align: center;
}
nav > div img {
width: 50%;
}
.hostgoods {
padding-left: 20px;
}
/* 每個區域標題樣式 */
.title {
margin-top: 10px;
font-size: 1.2rem;
font-weight: normal;
text-align: center;
}
/* 熱銷商品區 */
.hot-goods {
border-top: 1px solid #cdcdcd;
margin-top: 10px;
font-size: 0.8rem;
display: flex;
/* 水平多行容器 */
flex-flow: row wrap;
}
.hot-goods img {
width: 100%;
}
.hot-goods > .goods-img {
/* 內邊距重置大小 */
padding: 10px;
box-sizing: border-box;
/* 允許放大不允許縮小,否則專案不會換行,多行容器失效 */
flex: 1 0 30vw;
/* 再將每個商品描述轉為flex */
display: flex;
/* 主軸垂直且不允許換行 */
flex-flow: column nowrap;
justify-content: center;
}
/* 商品描述的最後一個區域轉flex,並設定專案在主軸上排列對齊方式 */
.hot-goods > .goods-img > div {
display: flex;
/* 分散對齊 */
justify-content: space-around;
}
/* 熱銷樣式 */
.hot {
color: coral;
}
/* 商品列表 */
.list-goods {
padding: 10px;
border-top: 1px solid #cdcdcd;
margin-top: 10px;
font-size: 0.8rem;
display: flex;
/* 主軸必須垂直 */
flex-flow: column nowrap;
}
/* 每個專案也轉為flex */
.list-goods > .goods-desc {
margin: 10px 0;
display: flex;
}
/* 列表中每個專案的樣式,加些間距 */
.list-goods > .goods-desc > a {
padding: 10px;
box-sizing: border-box;
}
.list-goods > .goods-desc > a:last-of-type:hover {
color: lightseagreen;
}
/* 圖片全部適應專案空間 */
.list-goods img {
width: 100%;
}
body > footer {
color: #666;
background-color: #efefef;
border-top: 1px solid #ccc;
height: 55px;
position: fixed;
bottom: 0;
width: 100vw;
display: flex;
justify-content: space-evenly;
padding-bottom: 100px;
}
body > footer a {
margin-top: 10px;
font-size: 0.8rem;
display: flex;
/* 垂直排列不換行 */
flex-flow: column nowrap;
/* 交叉軸專案居中顯示 */
align-items: center;
}
body > footer a > span:first-of-type {
/* 圖示字型設定大一些 */
font-size: 1.6rem;
}
</style>
</head>
<body>

<header>
<a href="">LOGO</a>
<span class="iconfont"></span>
</header>

<div class="slider">
<img src="static/images/banner.jpg" alt="banner" />
</div>

<nav>
<div>
<a href=""><img src="static/images/link1.webp"</a>
<a href="">京東超市</a>
</div>
<div>
<a href=""><img src="static/images/link2.webp" alt="" /></a>
<a href="">服裝百貨</a>
</div>
<div>
<a href=""><img src="static/images/link3.webp" alt="" /></a>
<a href="">數碼精品</a>
</div>
<div>
<a href=""><img src="static/images/link4.webp" alt="" /></a>
<a href="">優惠劵</a>
</div>
<div>
<a href=""><img src="static/images/link1.webp" alt="" /></a>
<a href="">超市精選</a>
</div>
<div>
<a href=""><img src="static/images/link2.webp" alt="" /></a>
<a href="">服裝百貨</a>
</div>
<div>
<a href=""><img src="static/images/link3.webp" alt="" /></a>
<a href="">數碼精品</a>
</div>
<div>
<a href=""><img src="static/images/link4.webp" alt="" /></a>
<a href="">優惠劵</a>
</div>
</nav>

<div class="hostgoods">
<h2>
熱銷商品<span class="iconfont hot" style="color: coral;"></span>
</h2>
</div>
<div class="hot-goods">
<div class="goods-img">
<a href=""><img src="static/images/goods1.jpg" alt="" /></a>
<p>Apple iPhone 11 128G</p>
<div>
<span>62299 元</span>
<span class="iconfont hot"></span>
</div>
</div>
<div class="goods-img">
<a href=""><img src="static/images/goods1.jpg" alt="" /></a>
<p>Apple iPhone X 512G</p>
<div>
<span>8299 元</span>
<span class="iconfont hot"></span>
</div>
</div>
<div class="goods-img">
<a href=""><img src="static/images/goods2.jpg" alt="" /></a>
<p>華為膝上型電腦</p>
<div>
<span>5699 元</span>
<span class="iconfont hot"></span>
</div>
</div>
<div class="goods-img">
<a href=""><img src="static/images/goods2.jpg" alt="" /></a>
<p>小米膝上型電腦</p>
<div>熘魚肚網衡陽網鳳穿金衣網滑溜鵪鶉網眾心塔牡丹蠍託網邁凱輪車隊官方網站創富原創小說網瑞時小說網道基原創小說網紅牛公司無彈窗小說網
<span>3999 元</span>
<span class="iconfont hot"></span>
</div>
</div>
<div class="goods-img">
<a href=""><img src="static/images/goods2.jpg" alt="" /></a>
<p>聯想膝上型電腦</p>
<div>
<span>4399 元</span>
<span class="iconfont hot"></span>
</div>
</div>
</div>

<h2 class="title">
商品列表<span class="iconfont hot" style="color: coral;"></span>
</h2>
<div class="list-goods">
<div class="goods-desc">
<a href=""><img src="static/images/goods4.jpg" alt="" /></a>
<a href=""
>[白條24期免息]Apple蘋果iPhone 11 手機 128G 全網通, 免費領取500元話費,
今天17:00下單,明晨12:00之前送達,7天無理由退貨,官方提供售後,
以上都是我瞎編的<span
class="iconfont hot"
style="vertical-align: middle;"
></span
></a
>
</div>
<div class="goods-desc">
<a href=""><img src="static/images/goods3.jpg" alt="" /></a>
<a href=""
>[白條24期免息]Apple洗衣機,專業清洗蘋果手機,
蘋果電腦,iPad,洗好保證不能用, 免費領取500元保險費,
今天17:00下單,明晨12:00之前送達,7天無理由退貨,官方提供售後,
以上都是我瞎編的<span
class="iconfont hot"
style="vertical-align: middle;"
></span
></a
>
</div>
<div class="goods-desc">
<a href=""><img src="static/images/goods5.png" alt="" /></a>
<a href=""
>[白條24期免息]Apple蘋果iPhone 11 手機 128G 全網通, 免費領取500元話費,
今天17:00下單,明晨12:00之前送達,7天無理由退貨,官方提供售後,
以上都是我瞎編的<span
class="iconfont hot"
style="vertical-align: middle;"
></span
></a
>
</div>
<div class="goods-desc">
<a href=""><img src="static/images/goods2.jpg" alt="" /></a>
<a href=""
>[白條24期免息]華為筆記本MateBook 14 全面屏輕薄效能膝上型電腦
十代酷睿(i5 16G 512G MX250 觸控屏多屏協同)灰, 以上都是我瞎編的<span
class="iconfont hot"
style="vertical-align: middle;"
></span
></a
>
</div>
</div>

<footer>
<a href="">
<span class="iconfont hot"></span>
<span>首頁</span>
</a>
<a href="">
<span class="iconfont hot"></span>
<span>分類</span>
</a>
<a href="">
<span class="iconfont hot"></span>
<span>購物車</span>
</a>
<a href="">
<span class="iconfont hot"></span>
<span>未登入</span>
</a>
</footer>
</body>
</html>

cc分享java：php中PC 和移動端 flex 通用佈局解決方案

1.flex 佈局常用屬性宣告flexBox容器display: flex; 主軸方向：預設行方向flex-direction: row;

cc分享java：Laravel Observer (ORM 觀察器)

Observer //註冊觀察器 App\\Providers\\AppServiceProvider.php; class AppServiceProvider extends ServiceProvider

cc分享java：Flex 容器的常用屬性與簡單案例

專用於Flex容器上的常用屬性 1.display:flex: 宣告是flex box容器容器內的子元素就會成為彈性專案

PC和移動端瀏覽器請求頭

技術標籤：爬蟲 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 1.0.3705; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.45