css3 flexbox

关于css3 flex一些属性的效果详解。

首先设置一个class为container的div容器,并包含了5个class为flex-item的子元素。为了方便查看效果设置了宽高等基础的样式。默认的显示效果如图:

html结构为:

<div class="container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

给container添加display: flex;(为了方便查看后续效果,这里给五个子元素设置了不同的高度,并且写上了序号),子元素的div排列发生改变:(注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

可以看到五个元素并排排列,并且顶部是对齐的,并且默认的样式是不会随着浏览器宽度变化换行的。为了改变样式就引入了后续几个属性。

关于父元素容器的设置:

首先是justify-content,这个属性定义了浏览器如何分配容器主轴上的子元素之间的空间。

The CSS justify-content property defines how the browser distributes space between and around flex items along the main-axis of their container.

/* 从行首起始位置开始排列 (默认值)*/
justify-content: flex-start;

/* 从行尾位置开始排列 */
justify-content: flex-end;

/* 居中排列 */ 
justify-content: center;

/* 均匀排列每个元素
首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-between;

/* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-around;

可以通过下面的图片来查看具体的效果:

第二个是align-item,和justify-content类似的方式,只是是在纵轴的方向上设置。

/* 对齐到侧轴起点 */
align-items: flex-start;

/* 对齐到侧轴终点 */
align-items: flex-end;

/* 在侧轴上居中 */
align-items: center;

/* 与基准线对齐 */
align-items: baseline;

/* 拉伸元素以适应 */
align-items: stretch;

第三个是align-content,定义了有多行时在纵轴上如何排布:

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

关于子元素的设置:

  • order规定了子元素的顺序,如给1号子元素设置order为5,那么1号的位置就换到了最后:

    .flex-item:nth-child(1): {
      order : 5;
    }
  • flex-grow设置了元素的放大比例,如果为0表示不放大。如果所有元素的flex-grow都为1,则平分剩余大小(不是大小相同,是平分剩余的大小)。

  • flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

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

  • flex-basis属性定义了在分配多余空间之前,项目占据的大小(纵向排列时是height,横向排列时是width)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

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