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 + /