伸缩布局的个人理解

首先要在低级元素中设置
display:flex;

默认的设置主轴的为

flex-direction: row;

默认的设置侧轴的为

flex-direction: column;

主轴中
如果所有的子元素中都排版一致,则可以用
默认

justify-content: flex-start;

两端对齐

justify-content: space-between;

环绕对齐

justify-content: space-around;

侧轴中,没有两端对齐和环绕对齐,其它的都一样的属性,例如

align-items: center;

如果是单独元素中设置的则用

align-self

换行

flex-wrap:nowrap;/*默认不换行*/
flex-wrap:wrap;/*换行*/

换行后的对齐方式

align-content:flex-start;/*换行后与侧轴起点对齐*/
align-content:flex-end;/*换行后与侧轴终点对齐*/
align-content:center;/*换行后与侧轴居中对齐*/

伸缩项排序,在所有的子元素中添加,数值越大越在后面,越小在前面,可以是负数

order:0;
posted @ 2021-03-16 14:51  凌兮  阅读(73)  评论(0)    收藏  举报