简单描述我对弹性盒子的理解及使用方法
- 2022 年 7 月 20 日
- 筆記
一 .
1 什么叫弹性盒子？
2 弹性盒子的特点，优劣势？
3 怎么去使用弹性盒子？
4 flex弹性盒子的注意事项有哪些？
/*************************************************解答**********************************************/
1. 弹性盒子也叫 Flexbox，是一种flex的布局效果，一般作用于手机端，在没有诞生flex之前一般都是用流式布局丶浮动布局丶定位布局等等…来“创造”页面，它最大的特点是有很大的布局分配能力。
2.先说他的
优点：flex布局有很多自定义属性来完成分配空间的效果，并不需要计算，可以合理的分配空间，基本上新版的浏览器都能兼容。
缺点：假如元素在页面是多行多列时，布局效果会很不尽人如意，一般情况下还是多用于移动端开发，解决不了检查效果与分配空间。
3. 弹性盒子的使用：在网页中我们把父级元素成为“容器”，它下面的第一层子元素成为“项目”，简单来说就是爸爸称为容器，他的子女称为项目，孙子或者再往后都不能再这么称呼了。如果想使用单行盒子就给需要使用的空间元素添加(给父级添加) display：flex； 这时，此元素就成了flex的容器盒子，整个容器就能使用flex的相关属性了。
4. flex的注意事项：① 子元素是依赖容器的元素，想要控制子元素的排序，依靠的是父级元素。 ② 设置父元素为弹性盒子，子元素的float将失效。 ③ 切记不要把flex与浮动布局或定位布局一起使用。 ④ 父级添加使用display:flex；子元素会块状化
二.
1. 主轴的排列方向？
2. 主轴的排序？
3. 项目的换行？
4. 主轴上的对齐方式？
5. 交叉轴的对齐方式？
6. 多行交叉轴的对其方式？
/*************************************************解答**********************************************/
1.主轴的排列方向：主轴分行模式 与 列模式两种，也就是水平与垂直，同时也就有了正反两个方向。
2. 主轴的排序：默认的是行模式 既 从左到右，分为以下几种：
flex-direction:row; 默认值 行模式 正向排序
flex-direction:row-reverse; 默认值 行模式 反向排序
flex-direction:column; 默认值 列模式 正向排序
flex-direction:column-reverse; 默认值 列模式 反向排序
3. 项目的换行：默认是强制不换行。
flex-wrap：nowrap； 强制不换行
flex-wrap：wrap； 强制换行
4. 主轴上的对齐方式：
justify-content：定义项目在主轴上的对齐方式，注意需要区别行模式和列模式，在渲染之前，会先找到项目的排列方式在做渲染
justify-content: flex-start; 主轴起点对齐
justify-content: flex-end; 主轴终点对齐
justify-content: flex-center; 主轴居中
分配弹性元素的方式：
justify-content: space-between;主轴两端对齐，每行首个元素贴近容器起点，每行尾个元素贴近容器重点，其余剩余空间均分
justify-content: space-around; 均匀排列每个元素，每个元素周围分配相同的空间，如果遇到相邻元素，就成了两臂间隔
justify-content:space-evenly;每个项目元素之间的距离相等，均分所有空间
5. 交叉轴的对齐方式：
align-items 指的是项目在交叉轴对齐方式，但是有前提，交叉轴方向上要有富裕的空间
height: 300px;
align-items: flex-start; /*交叉轴起点对齐*/
align-items: flex-end; /*交叉轴终点对齐*/
align-items: center; /*交叉轴居中对齐*/
6.多行交叉轴的对齐方式：
多行显示前提：有换行，并且在交叉轴方向上有空余空间
align-content: flex-start;/* 3. 交叉轴起点对齐 */
align-content: flex-end;/* 3.1 交叉轴终点对齐 */
align-content: center;/* 3. 交叉轴居中 */
align-content: space-between;/* 3. 交叉轴两端对齐 */
align-content: space-around;/* 3. 交叉轴环绕对齐，首尾一臂距离，相邻元素两臂距离 */
align-content: space-evenly;/* 3.交叉轴上每行元素之间距离相等，所有剩余空间距离相等 */
