flex 盒子之—-卧虎藏龙

  • 2017-10-04
  • 0
  • 0

Flexible Box 弹性盒子有两根轴 main-axis 和 cross-axis

两轴的开始/结束位置为 main-start/end 和 cross-start/end

以下子属性设在容器上:

display

应用Flexible Box很简单,display属性新增了 flex 和 inline-flex 分别将原来的盒模型改成弹性盒模型。用IE就悲剧了。

display: flex 将原本应该垂直排列的4个子div,被默认从左到右水平排列了,并占满一行。

display: inline-flex 跟上面一样,区别在于它跟display:inline-block 一样只占其中一部分。

混合版:针对IE10 均加上了-ms-前缀 变为 -ms-flexbox 和 -ms-inline-flexbox

flex-direction

flex-direction用于设置容器的方向,值为row(默认值), row-reverse, column,column-reverse.

默认row内部元素从左到右排列,row-reverse 就是将 main-start起点设在右边,实现从右到左排列。column是从上到下边排列, column-reverse 反之从下到上排列。

混合版:相比新版本只需加上-ms-前缀,即 -ms-flex-direction 值同新语法。

flex-wrap

flex-wrap用于指定放不下后如何换行。 值nowrap为默认值,wrap, wrap-reverse, 拖动页面大小,随着页面变窄,nowarp会自动调整元素宽度以保持不换行,wrap不改变元素宽度,显示不下就换行,wrap-reverse 显示不下换行的同时,调整行的顺序。

flex-flow

flex-flow 用于合并指定flex-direction 和flex-wrap属性,默认值为row nowrap 该属性单纯为了简化代码而已

justify-content

justify-content用于main-axis对齐,值为flex-start, flex-end, center,space-between,space-around

混合版:-ms-flex-pack,可设start ,end ,center,justify == 新属性的space-between , distribute == 新属性的space-around

align-items

align-items 用于corss-axis的对齐,可设flex-start,flex-end, center,baseline(根据元素的基线),stretch

align-content

align-content 跟 justify-content 有点像,只不过 他是用于多行的对齐方式

以下子属性设在内部元素上:

flex-grow 剩余空间比例分配

flex-shrink 溢出空间按比例收缩

flex-basis 定义了剩余或溢出的基准线

flex 合并flex-grow flex-shrink flex-basis 默认值为 0 1 auto

order 按照内部元素的显示顺序 例如第三和第5个p指定order:1,给第一个p指定order:2。

align-self 单独为内部元素指定对齐方式。

评论

还没有任何评论,你来说两句吧