记录弹性布局的学习总结
弹性布局的属性:
- display:flex | inline-flex;(适用于父类容器上)
两种方式的不同之处在于一个纵向排列,一个横向排列,如下图
- flex-folw (适用于父类容器上)复合属性。就是可以同时设置以下两个值
一。 flex-direction (适用于父类容器的元素上):设置或检索伸缩盒对象的子元素在父容器中的位置。如果元素的大小超过父容器,元素则会平均铺满盒子,而不溢出
1) row:横向从左到右排列(左对齐),默认的排列方式。
2)row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面)
3)column:纵向排列
4)column-reverse 反转纵向排列,
二。 flex-wrap (适用于父类容器上)设置或检索伸缩盒对象的子元素超出父容器时是否换行。
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
属性值
值 | 描述 |
---|---|
nowrap | 默认值。规定灵活的项目不拆行或不拆列。当子元素溢出父容器时不换行。 |
wrap | 规定灵活的项目在必要的时候拆行或拆列。当子元素溢出父容器时自动换行 |
wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。当子元素溢出父容器时自动换行,方向同wrap反转排列 |
initial | 设置该属性为它的默认值。请参阅 initial。 |
inherit | 从父元素继承该属性。请参阅 inherit。 |
-
justify-content(适用于父类容器上)设置或检索弹性盒子元素在主轴方向上的对齐方式。
CSS 语法
justify-content: flex-start|flex-end|cen