前言
我是歌謠 我有個兄弟 巅峰的時候排名c站總榜19 叫前端小歌謠 曾經我花了三年的時間創作了他 現在我要用五年的時間超越他 今天又是接近兄弟的一天人生難免坎坷 大不了從頭再來 歌謠的意志是永恒的 放棄很容易 但是堅持一定很酷 本題目源自于牛客網 微信公衆号前端小歌謠
題目
使用Flexbox的order屬性，可以完全擺脫項目在源碼中順序的限制。預設情況下，每個項目的order值都為0，意味着按照他們在源代碼中的順序進行排列。可以觀看右邊的代碼效果，從設計上說，把圖檔放在最前面可以抓住讀者的眼球，是比較好的設計方式，但是對于浏覽器而言，拿到标題并且直接将标題呈現給讀者的代價一定比擷取一張照片并渲染出來小得多。是以可以考慮折中的方式，先渲染标題但是優先顯示圖檔。
現在給"img"圖檔标簽設定"order: -1"屬性，此時觀察效果會發現圖檔的排列在标題之上，其他内容的相對位置不會變，它們的order值仍然是0。order的值不一定要連續，并且正負都可以。
完成以上所講的步驟即可通過測試，進入下一節的學習吧。
核心代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style type="text/css">margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
display: flex;
flex-direction: column;
text-align: center;
}
img {
order: -1</style>
</head>
<body>
<section>
<h2>countdown</h2>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1912%2F1135-191202143454.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639984107&t=eca951193e736a17eb96278117bcfb1f"
width="100%">
<article>The countdown to Christmas starts here.</article>
<p><a href="#">more</a></p>
</section>
</body>
</html> 
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)