弹性布局

记录弹性布局的学习总结

弹性布局的属性:

  • display:flex | inline-flex;(适用于父类容器上)

两种方式的不同之处在于一个纵向排列,一个横向排列,如下图

弹性布局_第1张图片

  • flex-folw (适用于父类容器上)复合属性。就是可以同时设置以下两个值

一。 flex-direction (适用于父类容器的元素上):设置或检索伸缩盒对象的子元素在父容器中的位置。如果元素的大小超过父容器,元素则会平均铺满盒子,而不溢出

       1) row:横向从左到右排列(左对齐),默认的排列方式。

       2)row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面)

       3)column:纵向排列

       4)column-reverse 反转纵向排列,

你可能感兴趣的:(CSS,css)