弹性布局（flex）自学笔记——关于弹性布局，你所需要了解的知识

已注销
228 阅读5分钟

弹性布局（Flex）

1. 优点&缺点

1.1 传统布局与Flex布局

传统布局Flex弹性布局
兼容性好操作方便。布局极为简单，在移动端应用广泛
布局繁琐（浮动、清除浮动……）PC端浏览器支持情况较差
有局限性，不能在移动端很好的布局IE 11 或更低版本，不支持或部分支持

1.2 使用场景

1、如果是PC端布局，仍使用传统布局；

2、如果是移动端，或不考虑兼容性问题的PC端页面布局，则使用flex弹性布局

2. Flex布局原理

2.1 布局原理解释

采用Flex布局的元素，被称为Flex容器（Flex container），简称“容器”。它的所有子元素自动成为容器成员，被称为Flex项目（Flex item），简称“项目”。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kks2WHa4-1638440308179)(D:\Web\course\HTML_CSS_Javascript\css\css-teach\flex弹性布局\img_md\容器项目.jpg)]

2.2 总结Flxe布局原理

通过给父盒子添加Flex属性，来控制子盒子的位置和排列方式。

3. Flex布局父级盒子常见属性

3.1 常见父项属性归纳

  • flex-direction：设置主轴的方向；
  • justify-content：设置主轴上的子元素排列方式；
  • flex-wrap：控制子元素是否换行；
  • align-items：设置侧轴上的子元素排列方式（单行）；
  • align-content：设置侧轴上的子元素的排列方式（多行）；
  • flex-flow：flex-direction和flex-wrap的复合属性。

3.2 flex-direction设置主轴方向

3.2.1 主轴与侧轴

在flex布局中，分为主轴与侧轴两个方向，或被叫做：行和列、x轴和y轴。

  • 默认主轴方向为x轴方向，水平向右；
  • 默认侧轴方向为y轴方向，水平向下。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IBKEoHQ8-1638440308182)(D:\Web\course\HTML_CSS_Javascript\css\css-teach\flex弹性布局\img_md\主轴、侧轴.jpg)]

3.3.2 属性值

flex-direction属性决定主轴的方向（及项目的排列方向）

注意：

主轴和侧轴是会变化的。

flex-direction设置谁为主轴，谁就是主轴，剩下的就是侧轴。

子元素顺着主轴排列。

属性值说明
flex-direction: row;（默认）从左到右
flex-direction: row-reverse;从右到左
flex-direction: column;从上到下
flex-direction: column-reverse;从下到上

3.3 justify-content 设置主轴上的子元素排列方式（重要）

注意：

使用 justify-content 前要确定主轴是哪个

属性值说明
justify-content: flex-start;（默认）从主轴头部开始排列
justify-content: flex-end;从尾部开始排列
justify-content: center;在主轴居中对齐
justify-content: space-around;最左最右元素不贴边，平分剩余空间（相邻子元素的边距为2倍被分配的空间）
justify-content: space-evenly;最左最右元素不贴边，每个元素之间的间隔相等
justify-content: space-between;先两边贴边，再平分剩余空间

3.4 flex-wrap 设置子元素是否换行（重要）

默认情况下，项目都排在一条线上（又称“轴线”）上。flex-wrap属性定义，在flex布局中默认不换行。

属性值说明
flex-wrap: nowrap;（默认）不换行
flex-wrap: wrap;换行

3.5 align-items 设置侧轴上的子元素排列方式（单行）（重要）

align-items控制子元素在一行时，在侧轴（默认为y轴）上的排列方式。

属性值说明
align-items: flex-start;（默认）从上到下
align-items: flex-end;从下到上
align-items: center;挤在一起（子元素没有间隔）居中
align-items: stretch;拉伸（设置此元素时，不要给子元素高度）

3.6 align-content 设置侧轴上的子元素排列方式（多行）

设置子项在侧轴上的排列方式，只能用于子项出现换行的情况（多行），在单行下是没有效果**的。

属性值说明
align-content: flex-start;从侧轴的头部开始排列
align-content: flex-end;从侧轴的尾部开始排列（贴底对齐）
align-content: center;在侧轴居中显示
align-content: space-around;最边上的子项不贴边，平分剩余空间（相邻子元素的边距为2倍被分配的空间）
align-content: space-between;子项在侧轴先分布在两边，再平分剩余空间
align-centent: stretch;（默认）各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'

3.7 flex-flow

flex-flow 是 flex-direction 和 flex-wrap 属性的复合属性。

flex-direction: row;
flex-wrap: wrap;
/* 简写为 */
flex-flow: row wrap;

4. Flex布局子项常见属性

  • flex：子项目所占的份数；
  • align-self：子项目自己在侧轴的排列方式；
  • order：子项的排列顺序。

4.1 flex属性（重要）

flex属性定义子项目在剩余空间中所分配的空间，占多少份数

.item {
    flex: <number>;	/* default 0 */
}

4.2 align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的aligh-items属性。如果没有父元素，则等同于stretch。

span:nth-child(2) {
    /* 设置自己在侧轴上的排列方式 */
    align-self: flex-end;
}

4.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为零

span:nth-child(2) {
    /* 设置自己在侧轴上的排列方式 */
    order: -1;	/*排位靠前*/
}

4.4. 伸缩属性

4.4.1 属性集合

属性值说明
flex-basis: ?px | ?% | ?rem | auto;设置弹性盒伸缩基准值。给所有子项选择器添加设置全体子项，给单独子项添加设置单独子项；
flex-grow: number;有剩余空间时，设置弹性盒的扩展比率，充满剩余空间。数字为0时，不缩小；
flex-shrink: number设置弹性盒的缩小比率
flexflex-grow/flex-shrink/flex-basis的合写属性，注意顺序。

  • 大于等于1：允许扩大或缩小；

  • 等于0：固定值，不变；

4.4.2 特殊写法

属性说明
flex: auto;flex: 1 1 auto;
flex: none;flex: 0 0 auto;
flex: 0%flex: 1 1 0%;
flex: 100px;flex: 1 1 100px;
flex: 1;flex: 1 1 0%;
  • auto表示width生效，宽度取决于设置的width；
  • 前两个数字为1 1时，子元素自动扩展、缩小，第三个基准值则不重要了。
avatar
文章
阅读
粉丝