flex布局学习笔记

flex布局(伸缩布局)

flex布局也叫做弹性布局、伸缩布局

布局：其实就是调整元素在水平和垂直方向上的布局方式。

css3在布局中提出了flex布局（弹性布局）的方法，这种布局方式让我们对于元素的排布更加灵活，适应性也更强，在响应式开发中使用的较多。

使用伸缩布局让一个子盒子在父盒子中水平垂直居中

/* 设置当前盒子为弹性盒子*/
display: flex;
/* 设置主轴方向的对齐方式：justify-content */
justify-content: center;
/* 设置侧轴方向的对齐方式：align-items */
align-items: center;

设置了 display：flex; 的盒子会变成一个弹性盒子。弹性盒子会多出了主轴和侧轴的概念。

主轴： 默认水平向右 （类似于x轴）

**侧轴：**与主轴垂直的就是侧轴，默认垂直向下（类似于y轴）

弹性盒子内部的子元素会默认沿着主轴方向 排布，默认水平向右布局。（类似于羊肉串）

---

主轴方向（flex-direction）（了解）

弹性盒子中主轴方向默认是水平向右的。

但是其实可以通过flex-diretion 属性修改主轴的方向（一般很少改变）

取值（主轴方向）：

取值	效果（主轴方向）
row	水平向右（默认）
row-reverse	水平向左
column	垂直向下
column-reverse	垂直向上

主轴对齐方式（justify-content）（重点）

元素在主轴上排布，可以通过 justify-content 属性设置元素的对齐方式

取值：

• flex-start：向主轴的开始位置对齐

  默认相当于左对齐

• flex-end：向主轴的结束位置对齐

  默认相当于右对齐

• center：居中对齐

• space-around：让空白环绕盒子显示

• space-between：让空白只在盒子之间显示

单行侧轴对齐方式（align-items）（重点）

可以通过 align-items 设置单行元素在侧轴的对齐方式。

取值：

• flex-start：向侧轴的开始位置对齐

• flex-end：向侧轴的结束位置对齐

• center：居中对齐

• stretch：让子盒子的高度拉伸显示（默认值）

  只有当子元素没有高度时，才会有拉伸效果（否则以设置的高度为准）

---

是否换行（flex-wrap）

flex布局中，默认是单行显示的，如果子元素的宽度之和超出了父元素的宽度，此时子盒子会默认压缩显示。

此时，如果需要设置子元素换行显示，可以使用属性 flex-wrap

取值：

属性值	效果
nowrap	不换行（默认值）
wrap	换行

多行侧轴对齐方式（align-content）

之前学习的 align-items 只是针对于单行元素的侧轴对齐方式。

如果需要设置多行元素的侧轴对齐方式，此时需要使用 align-content 才行

取值（和align-items差不多）：

取值	效果
flex-start	向侧轴的开始位置对齐
flex-end	向侧轴的结束位置对齐
center	居中对齐
stretch	子元素高度拉伸显示（只有没设高才有效果）
space-around	空白环绕盒子显示
space-between	空白只在盒子之间显示

align-items与align-content的区别：

• 如果子元素没有换行，只有一行的时候使用 align-items
• 如果子元素有多行，此时使用 align-content

---

----------------

给父元素设置的相关样式已经说完了

---

以下都是给子元素设置的相关属性~

分配子元素空间（flex属性）

可以通过flex属性设置子元素的分配的空间

需求： 让弹性盒子中的三个子元素等分！

作用： 按照份数分配父元素主轴（宽度）的剩余空间

优先分配具体的宽度，剩余的空间再按照分数分配。

代码： flex:份数;

通过flex属性可以很轻松的完成圣杯布局。

子元素排序（order属性）

在不能修改html结构的时候，要求改变子元素的属性，此时可以使用order属性设置

需求： 让弹性盒子中第二个子元素显示在左边第一个？？

作用： 设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0

代码： order：数字;

单个子元素侧轴对齐方式（align-self）

可以通过 align-self 属性设置单个子元素侧轴的对齐方式

需求： 让父元素中的单行子元素居中，然后让第一个子元素跑到侧轴开始位置！

作用： 设置单个子元素在侧轴的对齐方式

取值（和align-items取值一样）：

取值	效果
flex-start	向侧轴的开始位置对齐（默认相当于顶部对齐）
flex-end	向侧轴的结束位置对齐（默认相当于底部对齐）
center	居中对齐
stretch	子元素高度拉伸显示（只有没设高才有效果）

对于其他内容有兴趣可以看看阮一峰的博客