跳至主要內容

Flex 布局

约 3562 字

Flex 布局

主轴与交叉轴

在 flex 布局中,存在两个重要的轴:主轴(main axis)和交叉轴(cross axis)。

主轴是 flex 容器的主要方向。它可以是水平方向或垂直方向。

交叉轴是与主轴垂直的轴:

  • 如果主轴是水平方向,则交叉轴是垂直方向
  • 如果主轴是垂直方向,则交叉轴是水平方向

flex-direction 决定主轴方向

主轴方向为水平方向,项目从左到右依次排列。

flex-direction: row
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="flex-direction: row;">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

主轴方向为水平方向,项目从右到左依次排列。

flex-direction: row-reverse
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="flex-direction: row-reverse;">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

主轴方向为垂直方向,项目从上到下依次排列。

flex-direction: column
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="flex-direction: column;">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

主轴方向为垂直方向,项目从下到上依次排列。

flex-direction: column-reverse
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="flex-direction: column-reverse;">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

flex-wrap 决定换行行为

所有 flex 项目将放在一行内,可能会导致容器溢出。

flex-wrap: nowrap
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="flex-direction: row;flex-wrap: nowrap;">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>

当 flex 项目的总宽度超过容器宽度时,会将项目进行换行排列。

flex-wrap: wrap
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="flex-direction: row;flex-wrap: wrap;">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>

当 flex 项目的总宽度超过容器宽度时,项目会从尾部开始换行排列。

flex-wrap: wrap-reverse
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="flex-direction: row;flex-wrap: wrap-reverse;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>

justify-content 决定主轴对齐方式

项目在主轴起始端对齐。

justify-content: flex-start
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="flex-direction: row;justify-content: flex-start;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

项目在主轴末尾端对齐。

justify-content: flex-end
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="flex-direction: row;justify-content: flex-end;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

项目在主轴中心对齐。

justify-content: center
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="flex-direction: row;justify-content: center;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

项目在主轴上平均分布,首尾项目与容器边缘对齐。

justify-content: space-between
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="flex-direction: row;justify-content: space-between;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

项目在主轴上平均分布,项目之间和首尾项目与容器边缘之间的间隔相等。

justify-content: space-around
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="flex-direction: row;justify-content: space-around;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

项目在主轴上平均分布,包括首尾项目与容器边缘之间的间隔。

justify-content: space-evenly
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="flex-direction: row;justify-content: space-evenly;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

align-items 决定交叉轴对齐方式

项目被拉伸以填充整个交叉轴。

align-items: stretch
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-direction: row;align-items: stretch;"
>
    <div class="flex-item flex-auto-height">1</div>
    <div class="flex-item flex-auto-height">2</div>
    <div class="flex-item flex-auto-height">3</div>
    <div class="flex-item flex-auto-height">4</div>
    <div class="flex-item flex-auto-height">5</div>
</div>

项目在交叉轴起始端对齐。

align-items: flex-start
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height:200px;flex-direction: row;align-items: flex-start;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

项目在交叉轴末尾端对齐。

align-items: flex-end
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-direction: row;align-items: flex-end;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

项目在交叉轴中心对齐。

align-items: center
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-direction: row;align-items: center;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

项目在交叉轴上以基线对齐(以项目的基线对齐)。

align-items: baseline
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="align-items: baseline;">
    <div class="flex-item" style="font-size: 50px;">1</div>
    <div class="flex-item" style="font-size: 10px;">2</div>
    <div class="flex-item" style="font-size: 40px;">3</div>
    <div class="flex-item" style="font-size: 5px;">4</div>
    <div class="flex-item" style="font-size: 30px;">5</div>
</div>

align-content 决定整个容器在交叉轴的对齐方式

flex-flow: row wrap

align-content: stretch
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height:200px;flex-flow: row wrap;align-content: stretch;"
>
    <div class="flex-item flex-auto-height">1</div>
    <div class="flex-item flex-auto-height">2</div>
    <div class="flex-item flex-auto-height">3</div>
    <div class="flex-item flex-auto-height">4</div>
    <div class="flex-item flex-auto-height">5</div>
    <div class="flex-item flex-auto-height">6</div>
    <div class="flex-item flex-auto-height">7</div>
    <div class="flex-item flex-auto-height">8</div>
    <div class="flex-item flex-auto-height">9</div>
    <div class="flex-item flex-auto-height">10</div>
    <div class="flex-item flex-auto-height">11</div>
    <div class="flex-item flex-auto-height">12</div>
    <div class="flex-item flex-auto-height">13</div>
    <div class="flex-item flex-auto-height">14</div>
    <div class="flex-item flex-auto-height">15</div>
</div>
align-content: flex-start
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: row wrap;align-content: flex-start;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>
align-content: flex-end
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: row wrap;align-content: flex-end;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>
align-content: center
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: row wrap;align-content: center;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>
align-content: space-between
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: row wrap;align-content: space-between;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>
align-content: space-around
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: row wrap;align-content: space-around;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>

flex-flow: column wrap

align-content: stretch
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: column wrap;align-content: stretch;"
>
    <div class="flex-item flex-auto-width">1</div>
    <div class="flex-item flex-auto-width">2</div>
    <div class="flex-item flex-auto-width">3</div>
    <div class="flex-item flex-auto-width">4</div>
    <div class="flex-item flex-auto-width">5</div>
    <div class="flex-item flex-auto-width">6</div>
    <div class="flex-item flex-auto-width">7</div>
    <div class="flex-item flex-auto-width">8</div>
    <div class="flex-item flex-auto-width">9</div>
    <div class="flex-item flex-auto-width">10</div>
    <div class="flex-item flex-auto-width">11</div>
    <div class="flex-item flex-auto-width">12</div>
    <div class="flex-item flex-auto-width">13</div>
    <div class="flex-item flex-auto-width">14</div>
    <div class="flex-item flex-auto-width">15</div>
</div>
align-content: flex-start
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: column wrap;align-content: flex-start;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>
align-content: flex-end
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: column wrap;align-content: flex-end;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>
align-content: center
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: column wrap;align-content: center;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>
align-content: space-between
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: column wrap;align-content: space-between;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>
align-content: space-around
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div
    class="flex-container"
    style="height: 200px;flex-flow: column wrap;align-content: space-around;"
>
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
</div>

定义单个项目的属性

order

order
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="flex-direction: row;">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item" style="order: -1">5</div>
</div>

flex-grow

flex-grow
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="flex-direction: row;">
    <div class="flex-item" style="flex-grow: 1">1</div>
    <div class="flex-item" style="flex-grow: 2">2</div>
    <div class="flex-item" style="flex-grow: 3">3</div>
</div>

flex-shrink

flex-shrink
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="flex-direction: row;">
    <div class="flex-item" style="flex-shrink: 1;width: 500px;">1</div>
    <div class="flex-item" style="flex-shrink: 2;width: 500px;">2</div>
    <div class="flex-item" style="flex-shrink: 3;width: 500px;">3</div>
</div>

flex-basis

flex-basis
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="flex-direction: row;">
    <div class="flex-item" style="flex-basis: 100px">1</div>
    <div class="flex-item" style="flex-basis: 200px">2</div>
    <div class="flex-item" style="flex-basis: 300px">3</div>
</div>

flex

flex 属性是 flex-grow、flex-shrink 以及 flex-basis 的简写形式,默认值为 flex: 0 1 auto。

flex 属性有两个快捷值 ① flex: auto 等价于 flex: 1 1 auto;② flex: none 等价于 flex: 0 0 auto。

建议优先使用该属性而不是单独使用三个分离的属性,因为浏览器会推送相关值。

align-self

align-self
<link rel="stylesheet" href="/assets/styles/flex-layout.css">
<div class="flex-container" style="height: 200px;flex-direction: row;">
  <div class="flex-item" style="align-self: flex-start;">1</div>
  <div class="flex-item" style="align-self: center">2</div>
  <div class="flex-item" style="align-self: flex-end">3</div>
</div>
上次编辑于: