弹性布局怎么设置

本文主要分享【弹性布局怎么设置】，技术文章【弹性布局总结】为【空空777】投稿，如果你遇到HTML个人笔记相关问题，本文相关知识或能到你。

弹性布局怎么设置

弹性盒模型

弹性盒子游戏

除了父级弹性盒子的宽高，里面的容器是没有固定数据的，都是按照规矩 调节弹性分配

弹性盒子 默认块级也会同行显示 从左到右（主轴的顺序）弹性盒子内部不会换行，所有内容会等比例 同行显示高度是父代100%宽度是根据内容撑开，必须有内容的容身之处弹性项目过多，会撑大弹性盒子弹性项目宽高总和 <弹性盒子 = 不会发生变化弹性项目宽高总和 > 弹性盒子 = 会等比例缩小，然后同行显示

display:flex;

主轴方向

弹性 父盒子 主轴位置排列方式设置

弹性项目在弹性盒子的显示位置设置

flex-direction:row;					从左到右（默认）
flex-dirction:row-reverse;			从右到左
flex-direction:column;				从上到下
flex-direction:column-reverse;		从下到上

弹性项目换行

默认不会换行，并且重新定义父代宽度

不换行，弹性项目等比例分配弹性盒子width

弹性项目换行

换行处，空间不够会换行，会留白

换行的弹性项目不会等分弹性盒子width，高度会等分弹性盒子heigh

flex-wrap:wrap;     		换行
flex-wrap:wrap-reverse;	 换行但是位置是反的

主轴方向&换行复合写法

flex-flow: 主轴方向 弹性项目换行

flex-flow:row wrap;

弹性项目主轴方向排布

基于弹性盒子主轴方向设置，在进一步设置 弹性项目 的位置

设置主轴线 所有行的 弹性项目 位置

弹性项目width总和 不超过父代，剩下的尺寸会均分（不用设置margin）

justify-content:flex-start;		左对齐
justify-content:flex-end;		右对齐
justify-content:center;			居中
justify-content:space-between;	两端对齐  
justify-content:space-around;	每个子元素间隔等分，两端留白
justify-content:space-evenly;	左右均匀分布

弹性项目交叉轴方向排布

规则同上。多行显示会有留白

进阶会影响我，会失效

align-items:strech;			默认值没有高度会填满整个容器高度
align-items:flex-start;		交叉轴的起点对齐（上面）
align-items:flex-end;		交叉轴的终点对齐（底边）
align-items:center;			交叉轴的中点对齐（子项中线中间）
align-items:baseline;		第一行文字的基线对齐（很少用太丑）

弹性项目交叉轴方向排布进阶

设置了换行样式，多行的弹性项目可以单独设位置

进阶会影响align-items，会失效

前提是：换行的弹性项目总height <弹性盒子height

这个进阶就是控制留白，所有的弹性项目是一个整体的位置

align-conten:stretch;		默认值。高度会分成几等分（弹性项目数量）
align-content:center;		所有子盒子会居中对齐
align-content:flex-start;	元素位于容器的开头
align-content:flex-end;		元素位于容器的结尾
align-content:space-between;各行在弹性盒容器   平均分布
align-content:space-around;	各行在弹性盒容器平均分布，两端留白

总结 先判断主轴的方向，主轴是两端 还是居中 留白再判断交叉轴的方向，交叉轴是两端 还是居中 留白在设置弹性项目的具体位置 主轴方向跟换行的复合写法 条件属性（是否有效果）子项——flex容器align-itemsalign-content单——不指定高度是否行——固定高度是否（但是有设置换行时，有效果）多——不指定高度是否行——固定高度是是

结论：从上表可知，对于align-items和align-content的区别，我们只需要记住以下两点，

1.align-items属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在所有情况下都有效果（当然要看具体的属性值）。
2.align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行，只在两种情况下有效果：①子项多行且flex容器高度固定 ②子项单行，flex容器高度固定且设置了flex-wrap:wrap;

注：这里的高度固定的意思实际上是让flex容器在交叉轴上有多余的空间。

弹性增长因子

分配的是 弹性容器具有剩余空间（宽度）是如何分配给 子盒子

把剩余的空间 均分成几份，再分配到几份的子盒子

flex-grow:2;		扩大分成两份

弹性缩小因子

（子盒子的宽总和—父盒子的宽）除以多少份——数值就是缩小的一份数值

默认为1.设置为0，不进行缩放

flex-shrink:2;			缩小成2份

单个弹性项目设置尺寸

flex-basis

弹性大小因子复合写法

推荐这个，加快浏览器网页速度

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和

flex:1 1 auto;	等价 flex: 1;
flex:0 0 auto;

弹性项目的排布顺序

设置子盒子的排列顺序 按照坐标系的方向，数值越大越靠近

横向，纵向都能设置，看坐标系的方向

两个子盒子互换位置可以悬停加上这两个属性不就很轻松，不用设置平移距离 定位

order：1;

单个弹性项目的位置设置

align-self:auto; 		 默认
align-self:flex-start;	顶部对齐
align-self:flex-end;	底部对齐
align-self:center;		居中对齐
align-self:baseline;	文本基线对齐
align-self:stretch;		上下对齐并填满

弹性复合写法

flex-flow: column wrap-reverse;		右上角，从上到下并换行
flex-flow: row-reverse wrap;		置反

本文《弹性布局总结》版权归空空777所有，引用弹性布局总结需遵循CC 4.0 BY-SA版权协议。