css3:flexbox

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

请先运行demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>主轴为垂直方向 --by 李可</title> <style> .flex-container{ padding:0;margin:0;list-style:none; display:-webkit-flex; display:flex; width:700px; height:245px; /*主轴不一定是水平，纵轴不一定垂直，4个方向都有可能*/ /*下面flex-direction:colomn确定的主轴的方向是垂直向下的。*/ /*下面flex-wrap:wrap包裹，溢出自动在主轴平行的方向换“行（这里是换列）”*/ -webkit-flex-flow:column wrap; /*主轴方向（这里垂直向下）*/ /*主轴方向（这里垂直向下），也许溢出导致多行或者多列，每行或者每列主轴方向（水平、垂直）居中上下左右~等*/ justify-content:center; /* justify-content:flex-start;*/ /* justify-content:flex-end;*/ /*纵轴方向（这里水平向右）*/ /*纵轴方向（这里水平向右），也许溢出导致多行或者多列(这里)，每行或者每列(这里)的项目在这行或者列中的侧轴方向（水平（这里向右）、垂直）上居中上下左右，等*/ /*align-items:stretch;*/ /*纵轴方向（这里水平向右），把项目的width去掉，如果是垂直，去掉高度，默认strecth*/ /*坑！！，剩余空间：延伸项目延伸：延伸到这列（这里）或者行最大的项目的宽（这里）或者高*/ align-items:baseline;/*坑！！主轴为垂直，一列的项目不可能按基准线对齐，设置这个之后，这是时候是默认到flex-start;*/ /*align-items:flex-end;*/ /*align-items:center; */ /*align-items:flex-start;*/ /*（多纵轴方向）各行或者各列（这里）之间有空隙*/ /*溢出主轴，空隙。--》在侧轴方向的各行或者各列之间（这里是多列）的对齐。或者多列的弹性盒模型容器*/ /*注意这里说的是行或者列之间的布局，就相当于把溢出的的行或者列当成一个元素~*/ /*多行或者多列*/ /*0，行和列（这里）的剩余空间的计算*/ /*stretch的理解，多行或者多列的“剩余空间”先平均分配， 1，设置了项目的宽度（这里）或者高度，每一行或者列（这里）的留的富裕空间一样。 2，和每一列（这里）或者行的宽（这里）高没关系。 */ /*align-content:stretch;*/ align-content:space-around; /* align-content:space-between ;*/ /* align-content:flex-start;*/ /*align-content:center; */ /* align-content:flex-end;*/ background:yellowgreen; } .flex-item{ box-sizing:border-box; background:tomato; width:200px; height:50px; border:1px solid green; color:white; } .flex-item:nth-of-type(1){ width:250px; } .flex-item:nth-of-type(2){ width:30px; } .flex-item:nth-of-type(3){ width:320px; order:-1;/*调整位置，默认为0，越小越靠前。*/ } /* .flex-item:nth-of-type(5){ width:410px; }*/ .flex-item:nth-of-type(6){ width:150px; align-self: center;/*单独地调节一个项目的纵轴方向在这行或者列（这里）的位置*/ } </style> </head> <body> <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li class="flex-item">6</li> </ul> </body> </html>

运行

旧弹性盒子

过渡弹性盒子

新弹性盒子

功能类似，次加了几个属性

/6个盒子属性。窍门：flex-flow是：flex-direction flex-wrap的简写。这下3合1了~/

/*

确定主轴方向：这是个坑！！一定是先确定主轴方向,第一个项目到最后一个项目的排列顺序都是从主轴的开始位置到最后位置排列。

主轴方向水平向右，项目第一项水平靠左，依次向右排列| 主轴方向：项目之间有木有空隙，align-content？？？默认stretch align-self？？

主轴方向水平向左，项目第一项水平靠右，依次向左排列|

主轴方向垂直向下，项目第一项垂直靠上，依次向下排列|

主轴方向垂直向上，项目第一项垂直靠下，依次向上排列

/

1，flex-direction ：row(默认水平) | row-reverse | column | column-reverse;

/

盒子项目在溢出时：

一行项目自动缩小填满盒子|

换行（多行）|

换行，第二行排在第一行上面

*/

2，flex-wrap：nowrap(默认一行，项目伸缩) | wrap | wrap-reverse;

3，flex-flow

/*

(项目在主轴方向)布局位置：

所有项目起点浮动|

/

4，justify-content： flex-start(默认) | flex-end | center | space-between | space-around;

/

(项目在纵轴方向)布局位置：

坑1。baseline 当主轴为垂直的时候，一列（主轴）的项目，怎么沿基准线对齐啊？是没法对齐的，设置了之后，默认换成 flex-start

坑2。align-items和align-content的剩余空间计算。

align-items是剩余空间：延伸项目延伸：延伸到这列（这里）或者行最大的项目的宽（这里）或者高

align-content 1，设置了项目的宽度（这里）或者高度，每一行或者列（这里）的留的富裕空间一样。2，和每一列（这里）或者行的项目本身的宽（这里）高没关系。

*/

5，align-items： flex-start | flex-end | center | baseline | stretch(默认！);

6，align-content：flex-start | flex-end | center | space-between | space-around | stretch(默认！)

/6个项目属性。窍门：flex是：flex-grow flex-shrink flex-basis的简写。这下4合1了~/

1，flex-grow：; /* 默认0 /

2，flex-shrink：; / 默认 1 //这是个坑！！和grow的区别/

3，flex-basis： | auto; / 默认 auto */

4，flex

5，order：;

6，align-self：auto | flex-start | flex-end | center | baseline | stretch;

space-between | space-around空间的分配。

stretch(默认！)垂直方向。拉伸