1、Flex Terms
圖片發自簡書App
2、創建 flex container
display:flex
3、flex item
。在文檔流中的子元素
圖片發自簡書App
4、flex：方向、彈性、對齊
⑴、方向：
。flex-direction
。flex-wrap
。flex-flow
。order
①flex-direction: 排列方向
row | row-reverse | column | column-reverse
Paste_Image.png
②flex-wrap: 設置換行
nowrap | wrap | wrap-reverse
③flex-flow: <'flex-direction'> || <'flex-wrap'> 推薦使用
圖片發自簡書App
④order: <interger> 相對值
⑵、彈性：
。flex-grow
。flex-shrink
。flex-basis
①flex-basis
? flex-basis: main-size | <width>
? 設置flex item的初始寬/高
②flex-grow 伸展因子 重要
? flex-grow: <number>
? initial: 0
圖片發自簡書App
③flex-shrink 收縮因子
? flex-shrink: <number>
? initial: 1
④flex
? flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
? initial: 0 1 main-size
3、對齊：
。justify-content
。align-items
。align-self
。align-content
⑴justify-content （類似text-align）
圖片發自簡書App
⑵align-items 設置在整個容器上（類似 vertical-align）
圖片發自簡書App
⑶align-self 設置單個元素
圖片發自簡書App
⑷align-content
圖片發自簡書App
4、布局：三行自適應 + 兩行自適應
Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex fit layout</title>
<style>
html, body{margin: 0;text-align: center;}
.head, .foot{line-height: 100px;background-color: #000;color: #fff;}
.side{background-color: yellow;}
.main{background-color: pink;}
html, body{height: 100%;}
body{display: flex;flex-flow: column;}
.head, .foot{height: 100px;}
.body{flex: 1;display: flex;}
.side{width: 200px;}
.main{flex: 1;}
/*.main{margin-left: 10px;}*/
/*.body{width: 960px;align-self: center;}*/
</style>
</head>
<body>
<div class="head">head</div>
<div class="body">
<div class="side">side</div>
<div class="main">main</div>
</div>
<div class="foot">foot</div>
</body>
</html>```
Q1： ?怎么用Markdown打出來？？
Q2:如何迅速多行注釋？ （sublime-text）
A2：快捷鍵 Ctrl + /