发布于 

伸缩布局

伸缩布局

什么时候使用伸缩布局:

1.如果在在网页中希望让元素一行显示,并且元素随着父元素的宽度改变布局方式不会受影响

2.使用了伸缩布局以后,还可以使用浮动,定位,margin,padding

3.伸缩布局只是一个新的布局方式,不要把伸缩布局看的太重或者太难

核心知识点

1.伸缩盒子设置

2.设置伸缩盒子主轴

3.设置伸缩盒子主轴对齐方式

4.设置伸缩盒子侧轴对齐方式

5.设置伸缩盒子伸缩比例

6.less基本语法及使用

伸缩布局两个步骤:

●给父元素设置的属性

1
display:flex;   /*设置为伸缩盒子(弹性盒子)*/ 注:一定给父级!!!一定给父级!!!一定给父级!!!
1
2
3
4
5
6
7
justify-content/*设置元素在主轴对齐*/

justify-content:flex- start; /*默认*/
justify-content:flex-end; /*结束*/
justify-concent:center; /*居中*/
justify-content:space-between;/* 两端对齐中间自适应 */
justify-content: space-around; /* 环绕 */
1
2
flex-direction: /*设置主轴的方向*/
row(默认,水平) | column(竖显示) | row-reverse(横-右到左) | column-reverse(纵-右到左)
1
2
align-items; /*设置元素相对侧轴对齐方式*/
stretch(默认,拉伸效果) | flex-start(起点对齐) | flex-end(终点对齐) | center(中心) | baseline(第一行文字的基线对齐)
1
2
flex-wrap:/*设置伸缩盒子中元素是否换行显示*/
nowrap 默认不换行 | wrap 换行
1
2
3
align-content:/*当元素换行后的一种对齐方式*/
stretch(默认)
注:如果要设置align-content必须要保证元素是换行的

注: flex-flow复合属性 ===flex- direction和flex- wrap

●给子元素设置的属性

1
2
3
4
flex:/*设置元素占父元素剩余宽度的一个比例*/'也就是1份'
注:
1.flex 属性是给子元素设置的
2.剩余宽度:如果父元素中固定宽度的盒子,那么flex所占的比例是父元素整个的宽度-固定宽度后的比例

● 伸缩盒子中-子元素排序

1
2
3
4
order:值;  /*设置元素排序*/
特点:
1.值越大元素越靠后显示
2.在排序时候,完全不用修改html结构

伸缩盒子的特点:

​ 1.伸缩盒子中的所有元素都是一行显示的

​ 2.解释为什么伸缩盒子中的元素默认会一行显示?

​ ✖在伸缩盒子中元素都是按照主轴显示

​ ✖在伸缩盒子中有一条主轴,主轴的默认水平显示

​ 3.在伸缩盒子中还有一条轴,叫侧轴.(侧轴始终要垂直于主轴,侧轴的方向是随着儿主轴的方向发生改变的)

​ 4.在伸缩盒子中,如果子元素的宽度超出父元素的宽度,那么元素也不会换行

注: 在伸缩盒子中元素一行显示,与脱标没有任何关系


本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.