前端开发那些事儿

移动web开发——flex布局

2021-04-30  本文已影响0人  過尽千帆_YL

一,传统布局和——flex布局

1.1 传统布局

1.2 flex布局

1.3 建议

二,flex 布局原理

display:flex;  /* 开启flex 布局*/

三,父项常见属性

/*默认从左到右。改变主轴的方向(默认可以不写)*/
flex-direction: row ;
/*默认主轴上子元素从左到右排列*/
justify-content:flex-start;
/*设置换行*/
flex-wrap:wrap;

3.1 flex-direction 设置主轴的方向(改变默认的flex布局)

3.2 justify-content 设置主轴上子元素排列

用来决定里面子元素 在父元素的显示位置

3.3 flex-wrap 设置是否换行

/* 需要设置子元素宽度,才能换行 */
flex-wrap:wrap

3.4 align-items 设置侧轴上的子元素排列方式(单行)

3.5 align-content 设置侧轴上的子元素的排列方式(多行)

3.6 align-conten 和 align-itens区别

3.7 flex-flow 属性是flex-direction 和 flex-wrap 属性的复合属性

/* 设置主轴上的方向 和 是否换行,简写方式*/
flex-flow:row wrap;

四,flex 布局子项常见属性

4.1 flex 属性

flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。

父元素的份数 = 所有子元素 flex 值之和

注意:如果子元素 没有给flex 值 那么他没有默认值

总份数 平分的是 有固定盒子 宽度以外 的剩余空间

.item {
    flex: <number>; /* 默认值 0 */
}

4.2 align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。(设置单个子元素 再侧轴上居中显示)

span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
} 

4.3 order 属性定义项目的排列顺序

数值越小,排列越靠前,默认为0。

注意:和 z-index 不一样。

.item {
    order: <number>;
}
上一篇 下一篇

猜你喜欢

热点阅读