关于flex属性的一些问题

来源：3-12 flex布局-项目的属性

夜魇丶

2019-12-10 19:07:41

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       #main{
           width: 220px;
           height: 300px;
           border: 1px solid black;
           display: flex;
           /*flex-direction: column;*/
           /*align-items: center;*/
           /*justify-content: center;*/
       }

       #main span:nth-child(1){
           background-color: orange;
       }
       #main span:nth-child(2){
           background-color: lightblue;
       }
       #main span:nth-child(3){
           background-color: pink;
       }
   </style>
</head>
<body>
   <div id="main">
       <span>第一个span1</span>
       <span>第一个span22</span>
       <span>第一个span333</span>
   </div>
</body>
</html>

1. 如果把父元素设置为flex布局，那么子元素是不是就不区分块级元素和行内元素了。（div标签改成span标签，呈现的效果是一样的）。
2. 为什么默认情况下是父容器100%的高度，但是加了居中（align-items：center）; 文字居中了，但是高度却改由内容撑开了。
3. 同问题2，如果把主轴改为交叉轴，默认宽度是父容器100%的宽度，加了居中（align-items：center），文字居中，宽度由内容撑开。
4. 在实际工作的时候是要把父容器下面的子元素，宽高都写上吧（比如span{width:100%,height:100%;}）不然实际呈现的时候这个宽高会因为居中关系变得不好确定。
5. 我查了一下flex和inline-flex，后者比前者多一个内联块的属性，但我感觉没什么用…请问在实际中，什么情况下比较适合用inline-flex。

辛苦老师解答，关于这部分我查了一些别的资料也没太明白。宽高会莫名其妙变化，该用inline-flex的地方，用flex好像也能达到目的。