淘先锋技术网

首页 1 2 3 4 5 6 7

弹性盒子,为父容器指定为弹性盒子,设置display:flex,注意如果是webkit内核的,要加上前缀-webkit,即是display:-webkit-flex;

如果是行内元素,设置为display:inline-flex;

父容器拥有的属性:

1.flex-direction   决定盒子的主轴方向,默认自左向右是主轴,自上向下是纵轴。

      flex-dericttion:row;主轴是自左向右

      flex-deriction:row-reverse主轴是自右向左

     flex-deriction:column 主轴是自上向下

     flex-deriction:column 主轴是自下向上

2.flex-wrap  是否换行,默认是nowrap,不换行

     flex-wrap:nowrap  不换行

    flex-wrap:wrap  换行

    flex-wrap:wrap-reverse  换行,第一行在下面,第二行在上面

3.justify-content  定义条目在主轴上的排列方式

     justify-content:flex-start  默认  左对齐

    justify-content:flex-end  右对齐

    jusitify-content:center   居中

   jusitify-content:space-between 两端对齐

   jusitify-content:space-around   每个条目的两边空隙相等

4.align-item  定义定义条目在纵轴上的排列方式

   align-item:flex-start  顶部对齐

   align-item:flex-end   底部对齐

  align-item:center    居中对齐

  align-item:strecth    如果条目不设置高度,则沾满父容器的高度

  align-item:baseline 以条目的第一行文字为基线对准

总结:上面列出的是常用的父容器属性,设定主轴方向,条目对齐在主轴上的对齐方式,是否换行,条目在纵轴的对齐方式。

下面是给子容器设置的属性:

1.order  子元素的排列先后,数字越小,越靠前

2.flex-grow 子元素的放大比例

3.flex-shrink 子元素的缩小比例

给子元素设置属性常用的是这三个。