有关flex布局中遇到的小问题

大家都知道flex布局，相信很多人都使用过flex布局。我最初接触到flex布局是在学css3的时候，视频中的老师介绍到flex布局，然后特地百度了一下，找到了阮一峰老师关于flex布局的介绍。然后使用了一下flex布局，发现确实是布局起来更加方便，毕竟不用写那么多的margin，padding什么的。那么下面就直接说我遇到的问题吧，有关flex布局y语法可以在阮一峰老师写的Flex 布局教程：语法篇

话不多说直接进入主题：

1、某个子元素的位置不同

如果你还了解过flex布局，建议先了解之后再来看这个问题。下面是要实现的大致的效果图

上html代码：

<div class="father">
    <div class="son1">子元素</div>
    <div class="son2">子元素</div>
    <div class="son3">子元素</div>
</div>

html代码是比较简单的小布局。下面上css代码

 .father{
            margin: 100px auto;
            background-color: hotpink;
            width: 400px;
            height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

不要问为什么背景色是hotpink！！！，那么写完以上代码是怎么样的效果图呢

为了以免真有人直接不看语法篇直接来，那么我简单说说我上面写的css。首先是 flex-direction 这是改变flex子元素的排列方向，默认是横向的，这里我改成了纵向了。 justify-content 这个属性是规定了子元素在排列样式，具体的你可以看看上面的语法篇！（真的很重要）。值得一提的是：注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。所以这个实现效果是不能用float：right直接解决的！

然后博主做项目的时候就遇到了这种类似的情况，又不忍心放弃这么好用的flex。然后就用了以下的笨方法，因为子元素的float不能用，所以我只要领这个元素不是这个父元素的子元素就可以了。先改html代码

<div class="father">
    <div class="son1">子元素</div>
    <div class="son2">子元素</div>
   <div class="son">
       <div class="son3">子元素</div>
   </div>
</div>

没错就是在想要居右的元素再添加一个父元素，那么这个元素就不是father的子元素了。那么我们就可以快乐的使用float：right
这显然是个非常笨的方法，毕竟添加了无意义的标签，但是又解决了我们的需求，当然这是我找不到正确的姿势时候使用的方法，那么正确的姿势是怎么样的呢

 .son3{
            margin-left: auto;
        }

没错。。。就是加这个属性，博主是没有想到的，一开始博主我是用margin-right：auto，发现根本没有用。所以就用了上面的笨方法，当然具体的原因我还没知道啊。

待续。。。因为这个确实有点蛋疼所以就先分享了，之后我在遇到有关flex的问题我就持续更新。