flex布局

用了很久的flex布局，但还是不怎么熟悉它的使用。

先看一段代码

.container{
    display: flex;
    .title{
        color: #eee;
    }
    .info{
       color: red;
    }
}

<div class="container">
    <div class="title">hello</div>
    <div class="info"> world</div>
</div>

给container元素设置flex布局后，这个div就变成了一个flex容器，而它里面的title和info则成为容器中的项目。

容器的属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

项目的属性:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

要想在项目中使用flex-direction，则需要在项目中再设置display:flex，让该项目成为一个flex容器。

一开始以为flex布局可以继承，但使用时发现实际不行，重新看了下相应的知识点，才明白容器和项目的概念。