跳至主要內容

flex

𝓳𝓭𝔂𝓼𝔂𝓪大约 12 分钟

flex

flexbox 容器
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

父元素

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content
  7. align-items和align-content的区别

flex-direction

定义容器要在哪个方向上堆叠 flex 项目。

  • row
  • row-reverse
  • column
  • column-reverse
.flex-container {
  display: flex;
  flex-direction: column;
}
flex-direction
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

flex-wrap

flex-wrap 属性规定是否应该对 flex 项目换行。

  • wrap 值规定 flex 项目将在必要时进行换行
  • nowrap 值规定将不对 flex 项目换行（默认）
  • wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行

flex-flow

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

.flex-container {
  display: flex;
  flex-flow: row wrap-reverse;
  background-color: DodgerBlue;
}
flex-flow
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

.flex-container {
  display: flex;
  flex-flow: row wrap-reverse;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

justify-content

justify-content 属性用于对齐 flex 项目

  • center 值将 flex 项目在容器的中心对齐
  • flex-start 值将 flex 项目在容器的开头对齐（默认）
  • flex-end 值将 flex 项目在容器的末端对齐
  • space-around 值显示行之前、之间和之后带有空格的 flex 项目
  • space-between 值显示行之间有空格的 flex 项目
.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: DodgerBlue;
}
justify-content
<h1>justify-content 属性</h1>

<p>"justify-content: space-around;" 显示行之前、之间和之后带有空格的 flex 项目：</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>"justify-content: space-between;" 显示行之间有空格的 flex 项目：：</p>

<div class="flex-container2">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: DodgerBlue;
}

.flex-container2 {
  display: flex;
  justify-content: space-between;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.flex-container2 > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

align-items

align-items 属性用于垂直对齐 flex 项目。

属性值描述
flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline如弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将参与基线对齐。
stretch如果指定侧轴大小的属性值为 auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 min/max-width/height 属性的限制。
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}
align-items
<h1>align-items 属性</h1>

<p>"align-items: center;" 将 flex 项目在容器中间对齐：</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
baseline
<h1>align-items 属性</h1>

<p>"align-items: baseline;" 使 flex 项目基线对齐：</p>

<div class="flex-container">
  <div><h1>1</h1></div>
  <div><h6>2</h6></div>
  <div><h3>3</h3></div>  
  <div><small>4</small></div>  
</div>

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

align-content

align-content 属性用于对齐弹性线。

属性值描述
stretch默认。各行将会伸展以占用剩余的空间。
flex-start各行向弹性盒容器的起始位置堆叠。
flex-end各行向弹性盒容器的结束位置堆叠。
center各行向弹性盒容器的中间位置堆叠。
space-between各行在弹性盒容器中平均分布。
space-around各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
stretch
<h1>align-content 属性</h1>

<p>"align-content: stretch;" 拉伸弹性线以占据剩余空间（默认）：</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

align-items和align-content的区别

相关信息

  • align-items属性定义项目在交叉轴上如何对齐，而align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。
  • 通过flex-wrap属性可以控制容器中的项目是否换行，一旦flex-wrap的属性不为nowrap，那么容器中就有可能存在多行（内容不足以换行时并不会换行）。每一行都有该行的轴线（即使只有一行），此时就出现了“多根轴线”（一行时只有一条，因此打引号）
  • 一旦容器拥有了“多根轴线”，那么align-items会使得项目在各自的轴线上对齐，而align-content会使得所有内容（多行内容）作为一个整体在整个容器上对齐。若两个属性同时存在，则align-items不生效
    align-content
    在这里插入图片描述
    align-items
    在这里插入图片描述
align-items居中
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap:wrap;
  align-items: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
align-content居中
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>1</div>
  <div>2</div>
  <div>3</div>   
</div>

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap:wrap;
  align-content: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

子元素

flex 容器的直接子元素会自动成为弹性（flex）项目。

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self

order

order 属性规定 flex 项目的顺序。
代码中的首个 flex 项目不必在布局中显示为第一项。
order 值必须是数字，默认值是 0。

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>
order
<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

flex-grow

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。
该值必须是数字，默认值是 0。

使第三个弹性项目的增长速度比其他弹性项目快八倍：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>
flex-grow
<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

flex-shrink

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

flex-shrink
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 2">3</div>
  <div style="flex-shrink: 1">4</div>
  <div style="flex-shrink: 0">5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

flex-basis

flex-basis 属性规定 flex 项目的初始长度。

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

align-self

align-self 属性规定弹性容器内所选项目的对齐方式。
align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: stretch">3</div>
  <div>4</div>
</div>
align-self
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: stretch">3</div>
  <div>4</div>
</div>

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

相关链接

综合案例

使用 Flexbox 的响应式网站

响应式
<!-- 注释 -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">请调整浏览器窗口来查看响应效果。</h4>
</div>

<!-- Header -->
<div class="header">
  <h1>我的网站</h1>
  <p>拥有 <b>弹性</b> 布局。</p>
</div>

<!-- 导航栏 -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<!-- 弹性网格（内容） -->
<div class="row">
  <div class="side">
    <h2>关于我</h2>
    <h5>我的照片：</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">图像</div><br>
    <div class="fakeimg" style="height:60px;">图像</div><br>
    <div class="fakeimg" style="height:60px;">图像</div>
  </div>
  <div class="main">
    <h2>标题</h2>
    <h5>标题描述，2021 年 1 月 1 日</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>一些文本..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>标题</h2>
    <h5>标题描述，2021 年 1 月 2 日</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>一些文本..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <h2>页脚</h2>
</div>


* {
  box-sizing: border-box;
}

/* 设置 body 元素的样式 */
body {
  font-family: Arial;
  margin: 0;
}

/* 标题 / LOGO */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* 设置顶部导航栏样式 */
.navbar {
  display: flex;
  background-color: #333;
}

/* 设置导航条链接演示 */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* 更改鼠标悬停时的颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* 列容器 */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* 创建并排的非等列 */
/* 侧栏 / 左侧列 */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* 主列 */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* 伪图像，仅供示例 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* 响应式布局 - 当屏幕小于 700 像素宽时，让两列堆叠而不是并排 */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}

flex综合布局

.box {
  display: flex;
}
#box1 {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#box2 {
  justify-content: space-between;
}
#box2 .item:nth-child(2) {
  align-self: end;
}
#box3 {
  justify-content: space-between;
}
#box3 .item:nth-child(2) {
  align-self: center;
}
#box3 .item:nth-child(3) {
  align-self: end;
}
flex布局
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>新鲜的蔬菜</title>
  <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
  <div class="container">
    <div class="box" id="box1">
      <span class="item">
        <svg viewBox="0 0 496 512" width="50" title="smile">
          <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z" />
        </svg>
      </span>
    </div>
    <div class="box" id="box2">
      <span class="item">
        <svg viewBox="0 0 496 512" width="50" title="smile">
          <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z" />
        </svg>
      </span>
      <span class="item">
        <svg viewBox="0 0 496 512" width="50" title="smile">
          <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z" />
        </svg>
      </span>
    </div>
    <div class="box" id="box3">
      <span class="item">
        <svg viewBox="0 0 496 512" width="50" title="smile">
          <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z" />
        </svg>
      </span>
      <span class="item">
        <svg viewBox="0 0 496 512" width="50" title="smile">
          <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z" />
        </svg>
      </span>
      <span class="item">
        <svg viewBox="0 0 496 512" width="50" title="smile">
          <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z" />
        </svg>
      </span>
    </div>
  </div>
</body>

</html>

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 960px;
  margin: 0 auto;
}

.item {
  display: block;
  width: 66px;
  height: 66px;
}

.item img {
  width: 100%;
  height: auto;
}

[class$="box"] {
  width: 204px;
  height: 204px;
  margin: 20px;
  background-image: linear-gradient(
    rgb(252, 213, 136) 33.3%,
    #fff493 0,
    #fdf45d 66.6%,
    #f8da47 0
  );
  background-size: 6px 6px;
}

.box {
  display: flex;
}
#box1 {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#box2 {
  justify-content: space-between;
}
#box2 .item:nth-child(2) {
  align-self: end;
}
#box3 {
  justify-content: space-between;
}
#box3 .item:nth-child(2) {
  align-self: center;
}
#box3 .item:nth-child(3) {
  align-self: end;
}
默认页脚
Copyright © 2023 𝓳𝓭𝔂𝓼𝔂𝓪