阅读 218

学习一定要理解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 排列方式

  1. 主轴(main axis), 即沿着 X 轴 排列, 就是水平方向上的
  2. 交叉轴(cross axis), 垂直于主轴的方向, 即 Y 轴, 就是上下排列的方式
  3. 设置了 display: flex 的父元素(如上面的 <section>)称之为 flex 容器(flex container)
  4. 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-directionflex-wrap 1.5 justify-content ( X 轴 )横向对齐 主轴上的对齐方式

侧轴上的对齐方式: 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-contentflex-startflex-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 来设置行并自动换行。

语法:

flex-flow: <flex-direction> <flex-wrap>;
复制代码

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

justify-contentflex元素与主轴(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)

在线练习 Flex

熟练掌握需要多加练习才行, 收藏的在线练习 Flex 小破站:

Flex 在线练习: 小青蛙回家(与荷叶对齐)

评论互动 抽奖 掘金周边(官方支持)

欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送 100份掘金周边,抽奖详情见活动文章

文章分类
前端
文章标签