flex-direction作用：子元素在父元素盒子中的排列方式
| 属性值 | 作用 |
|---|---|
| row | 默认值，按从左到右的顺序显示 |
| 默认值，按从左到右的顺序显示 | 与row相同，以相反的顺序显示 |
| column | 将item垂直显示，按从上到下的顺序 |
| column-reverse | 与column相同，但顺序相反 |
示例：
父元素宽度500px，4个子元素，每个100px
<!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>Document</title><style>#div0{width:500px;background-color: violet;/* 父元素flex布局 */display:flex;/* 布局方向，水平，水平反转，竖向，竖向反转 */flex-direction: row;/* flex-direction: row-reverse; *//* flex-direction: column; *//* flex-direction: column-reverse; */}#div0 div{width: 100px;height: 100px;background-color: yellow;}</style></head><body><div id="div0"><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
示例二：父元素宽度300px，4个子元素分别为100px,当父元素宽度不够时，子元素会自动缩小：
<!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>Document</title><style>#div0{width:300px;background-color: violet;/* 父元素flex布局 */display:flex;}#div0 div{width: 100px;height: 100px;background-color: yellow;}</style></head><body><div id="div0"><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
子元素的宽度为父元素宽度均分，即300/4 = 75
如果子元素不给设置100px的宽度，此时还会平均分配宽度吗？
不会，子元素的宽度将为内容的宽度，不会自动缩小会扩大。
