一、弹性盒的概念
- 容器:设置了弹性盒属性的父级元素
- 项目:在容器里面的子级元素
- 作用:控制项目在容器里面的排列位置
二、弹性盒的设置
- 属性/属性值:display: flex;
- 基本特点:
- 元素设置了弹性盒属性,就会有主轴和侧轴的概念
- 弹性盒中默认的主轴方向是x轴,所有的项目都会沿着主轴排列(主轴侧轴是对应关系)
- 弹性盒中不考虑元素类型,所有的标签都可以直接添加宽高大小
- 弹性盒中的居中方式,给子级元素设置margin: auto; 即可
三、关于弹性盒使用的注意点
- 盒模型(margin/padding)、定位、位移可以用
- 没有脱离文档流
- 在弹性盒中不需要清除浮动也不会出现高度塌陷
四、添加在父级容器上的属性
-
改变主轴的排列方向:默认的主轴是X轴
- 属性:flex-direction
- 属性值
- row 行,默认主轴是X轴,侧轴是Y轴
- column 列,默认主轴是Y轴,侧轴是X轴
- row-reverse 反向显示,默认主轴是X轴
- column-reverse 反向显示,默认主轴是Y轴
-
设置主轴上的排列方式
- 属性:justify-content
- 属性值:
- flex-start 在主轴的开始位置
- flex-end 在主轴的结束位置
- center 在主轴的中间
- space-between 两端对齐,其余空间自动分配
- space-around 项目的左侧和右侧间距空间一样
- space-evenly 表示所有的空间全部自动分配(相等的)
-
设置侧轴上的排列方式
-
属性:align-items
-
属性值:
-
flex-start 在侧轴的开始位置
-
flex-end 在侧轴的结束位置
-
center 在侧轴的中间
-
baseline 基线对齐(默认情况下和flex-start情况一样)
文本的基线是在文字底部
-
stretch 拉伸(没有设置高度的时候)
-
-
-
换行属性
在PC端布局中,当元素宽度过多的时候,最后的元素不会往下掉(之前解决方法:min-width/百分比),当子级元素的宽度大于父级元素宽度的时候默认是挤压的(不会掉下去)
- 属性:flex-wrap
- 属性值:no-wrap 不换行,wrap 换行
-
行与行之间的间距
- 属性:align-content
- 属性:
- flex-start 换行后无行间距
- flex-end 在主轴的结束位置
- center 在主轴的中间
- space-between 两端对齐,其余空间自动分配
- space-around 项目的左侧和右侧间距空间一样
- spave-evenly 表示所有的空间全部自动分配(相等的)
五、添加在子级项目上的属性
直接子级
-
控制项目的显示顺序
- 属性:order
- 属性值:数字,数字越大越往后显示
-
设置单个元素在侧轴上的对齐方式
- 属性:align-self
- 属性值:
- flex-start/end/center/baseline/stretch
-
【重点】子级元素在父级元素中主轴方向的占比方式
-
属性:flex
-
属性值:数字,表示在父级中所占的比例
-
常见的情况:1、2、3(1/6, 1/3, 1/2)
-
flex:1 占据主轴上剩余的空间
移动端main部分(除去header和footer剩下的空间)
- 给父级设置弹性盒
- 改变父级主轴的方向,y轴
- 给占据剩下空间的子级元素设置flex:1
-
-
拓展: flex为1是由三个属性复合而成的:flex-grow、flex-shrink、flex-basis 1. flex-grow 表示当前元素比其他元素设置更多的宽度 0 - 表示正常显示 1 - 表示自动分配空间 2. flex-shrink 表示当前元素相对其他元素进行显示减小的宽度 0 - 表示不会收缩 1 - 表示会收缩 3. flex-basis 项目的宽度 0~100% 4. 总结 - 关于三个属性的默认值:0 1 auto 表示主体内容正常显示,并且会根据终端大小进行收缩显示 - 关于三个属性的重要值:1 1 0%(简写为flex:1) 表示当前主体内容会根据主轴剩下空间自动分配,并且会根据手机屏幕大小进行收缩显示,如果有很多子级内容会自动撑开大小