学习一定了解css中的Flex

在学习【CSS】时, 现代化布局解决方案: Flex 布局 非常方便快捷, 特别是水平垂直的解决方案, 用 Flex 就显得特别简单有没有! 今天就来深入学习一下.

CSS Flex 弹性盒子布局

弹性盒子-MDN 即为 flexible box 就是我们通常说的 Flex

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。

flex 容器: 父元素
flex 项目: 子元素

通过给元素设置 display: flex, 使得该元素的布局为弹性布局, 如下设置就把 section 容器设置成了弹性盒子(flex 容器), 其内部的子元素 section > .box 可进行方便的排列, 解决我们工作中的诸多常见问题

section {
  display: flex;
}
article {
  flex: 1;
  /* ... */
}
复制代码

接下来我们看一下弹性盒子的子元素 article 可设置的一些属性, 通过这些属性显示子元素的排列方式.

注意：假如你想设置行内元素为 flexible box，也可以置 display 属性的值为 inline-flex。

flex 弹性盒 items 排列方式

主轴(main axis), 即沿着 X 轴 排列, 就是水平方向上的
交叉轴(cross axis), 垂直于主轴的方向, 即 Y 轴, 就是上下排列的方式
设置了 display: flex 的父元素（如上面的 <section>）称之为 flex 容器（flex container）
在 flex 容器 中表现为柔性的盒子的元素被称之为 flex 项（flex item）: （如上面的元素。

flex 属性

先看一下 MDN 的解释: MDN 直达 Flex

flex CSS简写属性 设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

当父元素申明 display: flex, 其子元素可有 flex 属性, 表示其在父元素这个弹性盒子内的表现.

此flex 属性是以下 CSS属性 的简写：

flex-grow
flex-shrink
flex-basis

按父元素上的属性和子元素上的属性来区分

1. 添加在父元素上

1.1 display: flex/ inline-flex 1.2 flex-direction 改变主轴的方向子元素排列方向 1.3 flex-wrap (换行) 分散子元素 1.4 flex-flow 简写(合并)flex-direction 和 flex-wrap 1.5 justify-content ( X 轴 )横向对齐主轴上的对齐方式

扫描二维码关注公众号，回复： 13226866 查看本文章

侧轴上的对齐方式: 1.6 align-items ( Y 轴 )纵向对齐 1.7 align-content行之间的距离问题单行不起作用对齐方式调整之后, 上下没有间距

1.1 行内元素 flex

行内元素可设置 display: inline-flex;

1.2 改变主轴的方向: `flex-direction`

要调整元素的排列方向, 就是从前往后排列还是反过来排列, 我们可以用 flex-direction 属性。

这个 CSS 属性定义了元素在容器里摆放的方向，并且接受这些值：

row: 元素摆放的方向和文字方向一致。 (default)
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上。

注意: 当你调转行或列的方向后, justify-content 的flex-start 和 flex-end 对应的方向也被调转了。

注意: 当 flex 以列为方向时, justify-content 控制纵向对齐，align-items 控制横向对齐。

1.3 让子元素换行 `flex-wrap`

规定 flex 子元素必须在 单行 或 自动换行成多行.

flex-wrap 属性把元素分散开来。这个属性接受这些值：

nowrap: 所有的元素都在一行。 (default)
wrap: 元素自动换成多行。
wrap-reverse: 元素自动换成逆序的多行。

1.4 `flex-flow` 简写(合并)

flex-flow 合并 <flex-direction> 和 <flex-wrap>

这个缩写属性接受两个属性的值，两个值中间以空格隔开。

举个栗子: 我们可以用 flex-flow: row wrap 来设置行并自动换行。

语法:

1.5 主轴(X 轴横向)上的对齐方式 `justify-content`

justify-content 将 flex元素与主轴(x轴)对齐: 用于调整子元素 横向排列 的问题:

justify-content 这个 CSS 属性可以水平对齐元素，并且接受以下几个参数：

flex-start: 元素和容器的左端对齐。(default)
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-around: 元素周围保持相等的距离。
space-between: 元素之间保持相等的距离。相对于 space-around 元素之间的距离会较大一些, 而元素到容器的距离较小一些.
space-evenly

侧轴上的对齐方式

1.6. `align-items` 纵向对齐

align-items 在交叉轴(y轴)上对齐多个元素, 即调整子元素在 纵向排列 的问题.

align-items 这个 CSS 属性纵向对齐元素并且可选以下几个值：

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器。(default)

1.7. `align-content` 行之间的距离问题

当交叉轴有多余空间时, 对齐容器的轴线.

这可能有些容易混淆，但 align-content 决定行之间的间隔，而 align-items 决定元素整体在容器的什么位置。只有一行的时候 align-content 没有任何效果。

你可以使用 align-content 来决定行与行之间隔多远。这个属性接受这些值：

flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。 (default)

2. 添加在子元素上

2.1 前后顺序: order: 0 2.2 放大比例: flex-grow: 0 2.3 缩小 flex-shrink: 1 2.4 简写: flex 2.5 自己对齐: align-self

2.1 子元素前后顺序 `order`

order 决定 flex子元素的顺序.

有时候仅仅调转行或列的方向是不够的。在这些情况，我们可以设置单个元素的 order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。

2.2 放大比例: `flex-grow: 0`

2.3 缩小 `flex-shrink: 1`

2.4 简写: `flex`

2.5 自己对齐 `align-self` 控制单个元素对齐

另一个你可以使用的控制单个元素的属性是 align-self。这个属性接受和 align-items 一样的那些值。

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器。 (default)

作者：阿白756
链接：https://juejin.cn/post/7018169287827259423
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。