flex布局

flex布局

参考阮一峰的博客 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 有修改

这篇博客主要是说明flex的一些属性及其运用

怎么创建一个flexible box

首先不管是行内元素，还是块级元素都是可以指定为flex盒子的。

<style>
    div{
        display: flex;

        /* webkit */
        display: -webkit-flex
    }
    span{
        display: inline-flex;
    }
</style>

<div></div>
<span></span>

主要区别就是多了一个inline-

webkit内核的浏览器，必须加上-webkit前缀

flex容器设定

水平轴(main axis) 垂直轴(cross axis)

容器默认有两根轴，一根水平的主轴和一根垂直的交叉轴。

项目默认沿主轴排列，就是在一行内排序显示

容器属性列表

• flex-direction (主轴方向) 快捷跳转
• flex-wrap (换行) 快捷跳转
• flex-flow (direction和wrap的简写) 快捷跳转
• justify-content (规定主轴的对齐方式) 快捷跳转
• align-items (交叉轴对齐) 快捷跳转
• align-content (多根轴线对齐方式) 快捷跳转

flex-direction

flex-direction决定主轴方向

他的值有：

• row 默认 向右排序
• row-reverse 向左排序
• colum 向上排序
• column-reverse 向下排序

flex-wrap

这个属性决定换行的方式

他的值有：

• nowrap 默认 不换行
• wrap 从上往下的换行
• wrap-reverse 从下往上的换行

flex-flow

这个属性是direction和wrap的简写

写法： flex-flow: direction || wrap

justify-content

这个属性定义项目在主轴上的对齐方式

以下每个属性都会将每个项目排序之间存有距离

• flex-start 紧靠左边框
• flex-end 紧靠右边框
• center 居中
• space-between 两旁的项目是紧靠着左右边框，其他的项目是居中显示
• space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

可能文字表达不是很清晰，大家可以去阮一峰的博客里去看，那里有图片

align-items

这个属性是定义项目在交叉轴（垂直轴）如何对齐

• stretch 默认值 如果项目未设置高度或设为auto，将占满整个容器的高度
• flex-start 交叉轴的起点对齐
• flex-end 交叉轴的终点对齐
• center 交叉轴的中点对齐
• baseline 项目的第一行文字的基线对齐

align-content

定义多根轴线的对齐方式，如果只有一根轴线，这个属性不起作用

• stretch (默认值) 轴线占满整个交叉轴
• flex-start 与交叉轴的起点对齐
• flex-end 与交叉轴的终点对齐
• center 与交叉轴的中点对齐
• space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

项目属性

项目属性很简单，就不写列表了，直接把介绍写出来

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。