flex(弹性盒子布局)

弹性可伸展的.让一个容器变成一个可以自由伸展(弹性)的

移动端使用较多(不用考虑IE)

1 起源

2009年.W3C提出了一种新的方案----Flex布局(现在的浏览器支持性更好,导致了现在才开始流行)

2 作用

※※举例说明↓
完美的居中

<body>
    <div class="container">
        <div class="item">
            item
        </div>
    </div>
    <style type="text/css">
        .container{
            width:200px;
            height:200px;
            background:#eee;
            border:1px solid red;
             display:flex;
        }
        .item{
            width:50px;
            height:50px;
            background-color:#fff;
            margin:auto;
        }
    </style>
</body>

chrome下的输出结果:

缺点:父级元素(容器)加上了display:flex后第一子级元素(项目)都会变成块元素(嵌套的子级元素不会受影响)
优点
1)解决了margin重叠的问题
2)干掉的float

3 基本概念

3.1 容器&项目

容器：如果你给一个元素添加 display:flex，就称为这是一个容器。
功能 : 设置主轴的方向(项目的排列方向)
1)容器中项目会按照主轴方向进行摆放,默认的主轴方向是水平方向
2)容器的属性值
flex-direction(4个值)

flex-direction.png
flex-wrap(3个值)

flex-wrap.png
flex-flow

flex-flow.png
justify-content(5个值)

justify-content.png
align-items(5个值)

align-items.png
align -content(6个值)

align-content.png
项目：容器里面的直接子元素(子级第一个元素)，称为项目
1)所有项目都是block(子级元素下嵌套的元素除外)
2)项目的属性值
order:用于更改排列顺序。数值越小，排列越靠前，默认为0.可以为负数。

order.png
flex-grow

flex-grow.png
flex-shrink

flex-shrink.png
flex-basis

flex-basis.png
flex

flex.png
align-self

align-self.png
display:flex

display-flex.png
justify-content(子元素主轴的对齐方式)

子元素主轴对齐方式.png
align-items(子元素交叉轴对齐方式)

子元素交叉轴对齐方式.png

3.2 主轴$交叉轴