昨天学习了部分flex布局的属性，今天在学习几个项目中用的比较多的flex属性：

align-self 子元素位置属性

这个属性时对之前align-items属性的一个补充，align-items属性时设置父元素对子元素的交叉轴上的位置控制，而align-self属性是控制子元素自己相对于父元素的位置。

其中每个的值得意思参考“Flex 弹性布局1”中对align-items的讲解直接上图和代码一目了然：

代码如下：

.flex-container{
        display: flex;
        flex-direction:row;
        align-items: flex-start;
    }

    .flex-item1{
        height: 30px;
    }
    .flex-item2{
        height: 40px;
        align-self: flex-end;
    }
    .flex-item3{
        height: 50px;
        align-self: center;
    }
    .flex-item4{
        height: 60px;
    }

本来父元素align-items：flex-start 子元素应该是上部都是到顶部的，但是由于第二个和第三个子元素设置了align-self: flex-end;和 align-self: center;所以导致这个两个子元素位置是底部对齐和居中对齐。

flex属性

这个属性其实是有三个属性组合起来的，这里我就不细讲了我感觉讲多了反而令刚开始学的同学更迷糊，咱们从一个浅显的应用上大致了解一下就够了。

首先它是用在子元素上的，我们可以简单的理解为这个属性表示子元素所占的比例；

先上几个例子我们看一下：

1、item1 没有设置flex属性此时他的大小就是内容的大小，item2设置了flex：1这时我们发现item2就占据了父布局剩下的所有空间

2、我们看这个例子里面的item我们同时都设置了flex:1,我们发现这时三个item在父布局中所占的空间大小是将父布局三等分

3、这个里面我们设置分别设置flex:1，flex:2，flex:3，这时三个子元素所占的空间就是相比就是1:2:3

从我们的这个几个例子中我们可以大致的理解为flex就是主轴方向上所占空间的比例值。没有设置flex属性的就是内容所占的大小，而设置了flex的控件所占控件是剩余的空间按比例分配。

基本上这几个就是flex里面使用程度比较高的属性了，然后有什么不对的地方欢迎大神指点，帮助我进步。

祝每一个程序员工作顺心，事事如意、代码没bug、天天不加班。

四时宝库

程序员的知识宝库

Flex 弹性布局2（弹性布局flex换行）

align-self 子元素位置属性

flex属性