CSS3 -- display:flex
弹性盒子: 上下左右居中、换行、栅格布局
零、
父元素为display: flex;孙元素不受影响：所以想让子元素不受父元素影响，在子元素上套一层，让子元素变成孙元素
一、容器的属性（6）
display、 flex-direction、 flex-wrap、 justify-content、 align-items、 align-content
❶ display: inline-flex / flex;
(Webkit内核的浏览器，必须加上-webkit前缀。)
❷ flex-direction: row | row-reverse | column | column-reverse;（主轴左右还是上下，左始还是右始）
❸ flex-wrap: nowrap | wrap | wrap-reverse;（项目换行）
❹flex-flow: <flex-direction> || <flex-wrap>;（❷ 和 ❸的合体）
❺ justify-content: flex-start | flex-end | center | space-between | space-around;（主轴对齐方式）
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
❻ align-items: flex-start | flex-end | center | baseline | stretch;（交叉轴对齐方式）
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
❼ align-content: flex-start | flex-end | center | space-between | space-around | stretch;（基于主轴 并且交叉轴的设置）
display: flex; justify-content: center; align-items: center; width: 100%; /* 为什么加width: 100%;才能上下左右居中 */ /* 会让子元素上下左右居中*/
二、项目的属性（6、儿子的属性）
① order: <integer>; （/* default 0 */ 插队排序 -- 类z-index）
② flex-grow 放大 /* default 0 */
③ flex-shrink 缩小 /* default 1 */
④ flex-basis
⑤ flex 复合属性: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]（② ③ ④简写）
⑥ align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
三、
Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item）
主轴
交叉轴
main start
main end
cross start
cross end
main size（宽）
cross size（高）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex</title>
<style>
.flex{
display: flex;
width: auto;
height: 200px;
background: #ccc;
}
.inlineFlex{
display: inline-flex;
width: auto;
height: 200px;
border: 1px solid #000;
margin-top: 20px;
}
section{
/* margin-left: 10px; */
/* width: 200px; */
flex-grow: 1;
}
.f1{
order: 9;
}
.f2{
flex-grow: 2;
}
.f3{
}
.f4{
order: -2;
}
.f5{
}
.f6{
}
</style>
</head>
<body>
<div class="flex">
<section class="f1">1</section>
<section class="f2">2</section>
<section class="f3">3</section>
<section class="f4">4</section>
<section class="f5">5</section>
</div>
<div class="inlineFlex">
<article>01</article>
<article>02</article>
<article>03</article>
<article>04</article>
<article>05</article>
<article>06</article>
<article>07</article>
</div>
<div class="inlineFlex"></div>
</body>
</html>
父元素平分三个子元素
flex-wrap父
子flex: 0 0 33.3%; / 0 0 100px%;
http://www.runoob.com/w3cnote/flex-grammar.html ->
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://blog.csdn.net/weixin_41832017/article/details/106415639
