【重学CSS】图文并茂!一次性搞懂 Flex 布局,实现“布局自由”~(下)

简介: 【重学CSS】图文并茂!一次性搞懂 Flex 布局,实现“布局自由”~(下)

2.8 gap, row-gap, column-gap

gap属性row-gapcolumn-gap 的缩写,指定了 gutters 的大小,也就是网格、flex和多列布局中行和列之间的空间。
image.png
gap属性明确控制弹性项目之间的空间。它仅适用于不在外边缘的项目之间的间距。

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

image.png

<input type="range" min="0" max="10" step="0.1" value="1">
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>    
</div>

3、Flex 项目(Items)属性

3.1 order

order 用来定义子元素的排列顺序,可以取任意整数,默认为0,数值越小越靠前。默认情况下,弹性项目按源代码顺序排列。但是,该order属性控制它们在 flex 容器中出现的顺序。

.item {
  order: 5; /* default is 0 */
}

image.png
相同的项目order恢复到源顺序。

3.2 flex-grow

flex-grow 用来设置项目在 flex 容器中分配剩余空间的相对比例。默认为0,表示如果存在剩余空间也不放大。

剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有项目都flex-grow设置为1,则容器中的剩余空间将平均分配给所有项目。如果其中一个项目的值为2,则该项目将占用其他孩子的两倍空间(或者至少会尝试)。

.item {
    flex-grow: 4; /* default 0 */
    /* <number> 值 */
    flex-grow: 3;
    flex-grow: 0.6;
    /* 全局值 */
    flex-grow: inherit;
    flex-grow: initial;
    flex-grow: revert;
    flex-grow: unset;
}

image.png
注意:设置为负数的无效的。flex-grow 与其他的 flex 属性flex-shrinkflex-basis一起使用,通常使用flex 来简写定义,以确保所有的值都被设置。

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>

3.3 flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。默认为 1,即如果空间不足会自动缩小。

.item {
    flex-shrink: 3; /* default 1 */
    flex-shrink: 2;
    flex-shrink: 0.6;
    /* Global values */
    flex-shrink: inherit;
    flex-shrink: initial;
    flex-shrink: unset
}

注意:设置为负数的无效的。

3.4 flex-basis

flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。默认为auto,即根据内容自适应。

备注:  flex-basis 简史

  • 最初,"flex-basis:auto" 的含义是 "参照我的widthheight属性".
  • 在此之后,"flex-basis:auto" 的含义变成了自动尺寸,而 "main-size" 变成了 "参照我的widthheight属性"。实际执行于 bug 1032922.
  • 然后呢,这个更改又在 bug 1093316 中被撤销了,所以 "auto" 变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 (bug 1105111 包括了增加这个关键字).


.item {
    flex-basis:  | auto; /* default auto */
    /* 指定<'width'> */
    flex-basis: 10em;
    flex-basis: 3px;
    flex-basis: auto;
    /* 固有的尺寸关键词 */
    flex-basis: fill;
    flex-basis: max-content;
    flex-basis: min-content;
    flex-basis: fit-content;
    /* 在 flex item 内容上的自动尺寸 */
    flex-basis: content;
    /* 全局数值 */
    flex-basis: inherit;
    flex-basis: initial;
    flex-basis: unset;
}

备注:  当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级。如果设置为0,则不考虑内容周围的额外空间。如果设置为auto,则根据其flex-grow值分配额外空间。看这张图。

微信图片_20230613134847.png

3.5 flex

flexflex-growflex-shrinkflex-basis 的简写形式,默认值为 0 1 auto。第二个和第三个参数(flex-shrinkflex-basis)是可选的。

flex 属性的默认值为0 1 auto,但如果您将其设置为单个数值,例如flex: 5;,则会将 flex-basis 更改为 0%,因此等价于设置flex-grow: 5; flex-shrink: 1; flex-basis: 0%;


.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

3.6 align-self

align-self 会对齐当前 flex 行中的元素,并覆盖已有的 align-items 的值。在网格中,它使项目在网格区域内对齐。在 Flexbox 中,会按照 交叉轴(当前 flex 元素排列方向的垂直方向)进行排列。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

image.png

4、Flex 布局和 Grid 布局之间的区别

flexboxgrid 之间有很多相似之处,在前端布局中比之前出现的任何布局技术都强大得多。它们可以拉伸和收缩,可以居中,可以重新排序,可以对齐等待。下面我们看看它们之间有什么差异:

4.1 Flexbox 可以选择性地换行

如果我们允许 flex 容器换行,当 flex 项目填满一行时,它们将换行到另一行。它们在下一行的排列位置与第一行发生的情况无关,从而呈现出类似砖石结构的外观。

网格也可以选择换行(如果我们允许自动填充),因为项目可以填充一行并移动到新行(或自动放置它们自己),但是当它们这样做时,它们将沿着相同的网格线排列元素做。

image.png

4.2 Flex 是一维布局,而 Grid 是二维布局

虽然 flexbox 可以在允许元素换行,某种意义上创建了行和列这种二维布局,但无法以声明方式控制元素的最终位置,因为元素仅沿单个轴排列,然后相应地换行或不换行。如果主轴够长的话,它们会沿着一维平面做它们做的事情,这是因为我们可以选择做一些事情的单一维度,比如沿基线对齐元素——这是网格无法做到的。

.parent {
  display: flex;
  flex-flow: row wrap; /* OK elements, go as far as you can on one line, then wrap as you see fit */
}

你可以将网格视为”二维“,因为我们可以声明行和列的大小,然后根据我们的选择明确地将内容放入行和列中。

.parent {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; 
  grid-template-rows: 200px auto 100px; 
  grid-template-areas:
    "header header header"
    ". main sidebar"
    "footer . .";
}
.child-1 {
  grid-area: header;
}
.child-2 {
  grid-area: main;
}
.child-3 {
  grid-area: sidebar;
}
.child-4 {
  grid-area: footer;
}

image.png
网格主要是在父元素上定义的。在 flexbox 中,大部分布局(超出最基本的布局)都发生在 children 上。

.flexbox {
  display: flex;
  > div {
    &:nth-child(1) { // logo
      flex: 0 0 100px;
    }
    &:nth-child(2) { // search
      flex: 1;
      max-width: 500px;
    }
    &:nth-child(3) { // avatar
      flex: 0 0 50px;
      margin-left: auto;
    }
  }
}
.grid {
  display: grid;
  grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr;
  grid-template-rows: 100px repeat(3, auto) 100px;
  grid-gap: 10px;
}

4.3 Grid 更擅长重叠

让元素在 flexbox 中重叠需要查看传统的东西,如负边距、transforms 或绝对定位,以打破 flex 行为。使用网格,我们可以将项目放置在重叠的网格线上,甚至可以放在完全相同的网格单元格中。image.png

4.4 Grid 更稳固

虽然 flexbox 的灵活性有时是它的优势,但一个 flex项目 的大小是相当复杂的。它是widthmin-widthmax-widthflex-basisflex-growflex-shrink的组合,更不用说里面的内容和留白等事项,以及同一行的其他项目。网格有有趣的空间占用功能,比如小数单位,以及内容打破网格的能力,不过,一般来说,我们是在设置网格线,并在其中放置项目,这些项目会直接到位。

4.5 Flex 可以把东西推开

这是 flexbox 的一个相当独特的功能,例如,你可以在一个元素上放 margin-right: auto;,如果有空间的话,这个元素会把其他东西推得越远越好。

4.6 用 Flex 还是 Grid ?

有个推特大佬说的挺好:

image.png意思是:Flexbox是用于对齐。CSSGrid是用来布局的。

当你心里已经有了布局结构时,就使用 Grid 布局,而当你只想让所有东西都fit时,就使用 Flex 布局布局优先 vs 内容优先

5、推荐几个可视化学习 Flexbox 布局的站点

  1. progressivered.com - Flex Layout Attribute
  2. flexboxpatterns

end~


相关文章
|
1月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
119 57
|
24天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
10天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。
|
12天前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
44 10
|
23天前
|
容器
在 Flex 布局中,如何设置元素在侧轴上的初始对齐方式?
【10月更文挑战第22天】同时,还可以进一步探索其他 Flex 布局相关的属性和技巧,以更好地掌握 Flex 布局的强大功能,创造出更具创意和适应性的页面布局。
27 2
|
1月前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
38 4
|
1月前
|
前端开发 容器
flex布局
【10月更文挑战第7天】
28 1
|
17天前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
1月前
|
前端开发 开发者 容器
CSS3:flex&box-sizing
本文介绍了CSS中的Flex布局及其相关属性,如`flex-direction`、`flex-wrap`、`justify-content`等,并通过代码示例展示了如何使用这些属性来控制容器内的项目排列方式。同时,还讲解了`align-items`属性用于定义子元素在交叉轴上的对齐方式,以及`box-sizing`属性的不同取值对元素尺寸计算的影响。