伸缩布局

什么时候使用伸缩布局:

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

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

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

核心知识点

1.伸缩盒子设置

2.设置伸缩盒子主轴

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

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

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

6.less基本语法及使用

伸缩布局两个步骤:

●给父元素设置的属性

1	display:flex; /设置为伸缩盒子(弹性盒子)/ 注:一定给父级!!!一定给父级!!!一定给父级!!!

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

●给子元素设置的属性

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

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

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

伸缩盒子的特点:

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

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

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

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

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

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

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

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。