心流笔记

主题

Wilson2025-03-15 03:26:05前端css
2132
8.9m

前端css Flex布局 ​

Flex 布局，可以简便、完整、响应式地实现各种页面布局。flex布局发展到如今，已经十分成熟，并广泛应用于PC端和移动端

基本概念 ​

Flex（Flexible Box）弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，行内元素也可以指定为 Flex 布局

  • display: flex：将元素设置为 Flex 容器，使其子元素成为 Flex 项目。Flex容器的默认行为是块级元素，子元素将在主轴（默认为水平方向）上布局。
  • display: inline-flex：将元素设置为行内级别的 Flex 容器，使其子元素成为 Flex 项目（很少使用）

img

  • 弹性容器： 开启了 flex 的元素，称为弹性容器
  • 弹性项目：弹性容器所有子元素自动成为了弹性项目

容器默认存在两根轴：水平的主轴（main axis）和垂直的侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；侧轴的开始位置叫做cross start，结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的侧轴空间叫做cross size

Flex布局特点 ​

父元素设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。父元素作为容器，子元素作为项目。子元素可以自动的挤压或拉伸

对于 Flex 而言，标签不再分类，且不脱离标准流，完全取代了浮动

  • 没有块级元素、行内元素、行内块元素
  • 任何一个元素都可以直接给宽度和高度

容器属性 ​

以下六个属性设置给容器：

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

flex-direction ​

flex-direction属性决定主轴的方向

  • row默认值：主轴为水平方向，起点在左端
  • row-reverse：主轴为水平方向，起点在右端，容器成员顺序与row顺序相反
  • column：主轴为垂直方向，起点在上沿
  • column-reverse：主轴为垂直方向，起点在下沿，容器成员顺序与column顺序相反

image-20240219143608248

flex-wrap ​

flex-wrap属性决定当轴线方向放不下成员时，是否换行

  • nowrap默认：不换行。空间不足按轴线方向成员大小比例缩小的成员

img

  • wrap：换行

img

  • wrap-reverse：换行，新起的一行在上方

img

flex-flow ​

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，无顺序限制

css
flex-flow: row wrap;

justify-content ​

定义成员在主轴上的对齐方式，可以很容易地实现多种布局

  • flex-start默认值：左对齐

  • flex-end：右对齐

  • center： 居中对齐

  • space-between：两端对齐，成员之间的间隔都相等

  • space-around：两端距离是中间距离的一半

  • space-evenly：两端距离与中间距离一致

image-20230504214606263

align-items ​

定义成员在侧轴上如何对齐

  • stretch默认值：如果成员未设置高度或设为auto，将占满整个容器的高度
  • flex-start：侧轴的起点对齐
  • flex-end：侧轴的终点对齐
  • center：侧轴的中点对齐
  • baseline: 成员的第一行文字的基线对齐
image-20240219150024174

align-content ​

定义多根轴线的对齐方式。如果成员只有一根轴线，该属性不起作用

  • stretch默认值：轴线占满整个侧轴
  • flex-start：与侧轴的起点对齐
  • flex-end：与侧轴的终点对齐
  • center：与侧轴的中点对齐
  • space-between：与侧轴两端对齐，轴线之间的间隔平均分布
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
  • space-evenly：在侧轴上完全平分
image-20230506105425429

项目属性 ​

以下六个属性设置给项目：

  • order：定义项目排列顺序
  • flex-grow：定义项目放大比例
  • flex-shrink：定义项目缩小比例
  • flex-basis：定义在分配多余空间前，项目占据的主轴空间（main size）
  • flex：flex-grow、flex-shrink、flex-basis的简写
  • align-self：允许单个项目有与其他项目不一样的对其方式

order ​

order属性定义成员的排列顺序，数值越小，排列越靠前，默认为0

flex-grow ​

flex-grow属性定义项目的放大比例。默认为0，即如果存在剩余空间，也不放大

img如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话)。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

flex-shrink ​

flex-shrink属性定义了项目的缩小比例。默认为1，即如果空间不足，该项目将缩小。该属性值不能为负数

img

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

例：三个收缩项目，宽度分别为： 200px、300px、200px，它们的 flex-shrink 值分别为： 1、2、3。容器宽度为400px，计算三者收缩大小

  • 计算收缩比例分母：(200 * 1 + 300 * 2 + 200 * 3)
  • 计算各项目收缩比例：(宽度 * 倍数) / 比例分母
  • 计算收缩大小：收缩比例 * 超出大小，此处超出大小为：200 + 300 + 200 -400

flex-basis ​

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本身大小。

此属性会让高度或宽度失效：主轴横向，宽度失效；主轴纵向，高度失效

flex ​

flex属性是flex-grow、flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

  • flex: 1 1 auto，简写为：flex: auto
  • flex: 1 1 0，简写为：flex: 1
  • flex: 0 0 auto，简写为：flex: none
  • flex: 0 1 auto，简写为：flex: 0 auto（默认值）

align-self ​

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

css
align-self: auto | flex-start | flex-end | center | baseline | stretch;

Flex实战 ​

要想掌握 Flex 用法，可以通过绘制骰子来锻炼

本节HTML模板如下：

html
<div class="box">
  <!-- 此处span元素个数根据骰子点数而增加 -->
  <span class="item"></span> 
  <!-- ... -->
</div>

核心代码如下（其余代码如设置长、宽等代码省略）

  • 一点

img

css
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • 两点

img

css
.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}
  • 三点

img

css
.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}
  • 四点

img

HTML模板

html
<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

CSS样式

css
.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: space-between;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  justify-content: space-between;
}
  • 五点

bg2015071316

HTML模板

html
<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

CSS样式

css
.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: space-between;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  justify-content: space-between;
  align-items: center;
}

.column:nth-child(2) {
  justify-content: center;
}
  • 六点

img

HTML模板

html
<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

CSS样式

css
.box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.column {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
最近更新