岩石教程

Flexbox布局介绍

2024-07-15 18:38:38 150
Flexbox（弹性盒子布局）是一种用于设计一维布局的方法，它能够简便地创建灵活的响应式布局。Flexbox 主要由父容器（称为 flex 容器）和子元素（称为 flex 项目）组成。

Flex 容器属性

Flex 容器属性及值的详细介绍

属性值描述
displayflex, inline-flex定义一个 flex 容器，启用 flex 布局。
flex-directionrow, row-reverse, column, column-reverse定义主轴的方向（项目的排列方向）。
flex-wrapnowrap, wrap, wrap-reverse定义 flex 项目是否换行。
flex-flow<flex-direction> <flex-wrap>flex-direction 和 flex-wrap 的简写。
justify-contentflex-start, flex-end, center, space-between, space-around, space-evenly定义主轴上的对齐方式。
align-itemsflex-start, flex-end, center, baseline, stretch定义交叉轴上的对齐方式。
align-contentflex-start, flex-end, center, space-between, space-around, stretch定义多行容器的对齐方式。

display

值描述
flex定义一个块级的 flex 容器，启用 flex 布局。
inline-flex定义一个内联的 flex 容器，启用 flex 布局。

flex-direction

值描述
row主轴为水平方向，项目从左到右排列。
row-reverse主轴为水平方向，项目从右到左排列。
column主轴为垂直方向，项目从上到下排列。
column-reverse主轴为垂直方向，项目从下到上排列。

flex-wrap

值描述
nowrap默认值，不换行。
wrap换行，第一行在上方。
wrap-reverse换行，第一行在下方。

flex-flow

值描述
<flex-direction> <flex-wrap>flex-direction 和 flex-wrap 的简写。

justify-content

值描述
flex-start默认值，项目向主轴的起点对齐。
flex-end项目向主轴的终点对齐。
center项目在主轴上居中对齐。
space-between项目在主轴上均匀分布，项目之间的间隔相等。
space-around项目在主轴上均匀分布，项目两侧的间隔相等。
space-evenly项目在主轴上均匀分布，所有间隔相等。

align-items

值描述
flex-start项目在交叉轴的起点对齐。
flex-end项目在交叉轴的终点对齐。
center项目在交叉轴上居中对齐。
baseline项目在交叉轴上基线对齐。
stretch项目在交叉轴上拉伸到容器的高度（默认值）。

align-content

值描述
flex-start各行在交叉轴的起点对齐。
flex-end各行在交叉轴的终点对齐。
center各行在交叉轴上居中对齐。
space-between各行在交叉轴上均匀分布，行之间的间隔相等。
space-around各行在交叉轴上均匀分布，行两侧的间隔相等。
stretch各行在交叉轴上拉伸到容器的高度（默认值）。

Flex 项目属性

Flex 项目属性及值的详细介绍

属性值描述
order<integer>定义项目的排列顺序，数值越小，排列越靠前，默认为 0。
flex-grow<number>定义项目的放大比例，默认为 0（不放大）。
flex-shrink<number>定义项目的缩小比例，默认为 1（可以缩小）。
flex-basis<length>, auto定义项目的初始大小，默认为 auto。
flexnone, <flex-grow> <flex-shrink> <flex-basis>flex-grow, flex-shrink 和 flex-basis 的简写。
align-selfauto, flex-start, flex-end, center, baseline, stretch允许单个项目有与其他项目不一样的对齐方式，默认值为 auto。

order

值描述
<integer>定义项目的排列顺序，数值越小，排列越靠前，默认为 0。

flex-grow

值描述
<number>定义项目的放大比例，默认为 0（不放大）。

flex-shrink

值描述
<number>定义项目的缩小比例，默认为 1（可以缩小）。

flex-basis

值描述
<length>定义项目的初始大小，单位可以是 px、em 等。
auto根据项目的内容自动调整大小（默认值）。

flex

值描述
none无弹性效果，相当于 0 1 auto。
<flex-grow> <flex-shrink> <flex-basis>flex-grow, flex-shrink 和 flex-basis 的简写。

align-self

值描述
auto默认值，继承 align-items 的值。
flex-start项目在交叉轴的起点对齐。
flex-end项目在交叉轴的终点对齐。
center项目在交叉轴上居中对齐。
baseline项目在交叉轴上基线对齐。
stretch项目在交叉轴上拉伸到容器的高度。

Flexbox 布局示例

基本水平布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 100vh;
      border: 2px solid #000;
    }

    .item {
      flex: 1;
      margin: 10px;
      padding: 20px;
      background-color: #f0f0f0;
      border: 1px solid #000;
      text-align: center;
    }

    .item:nth-child(odd) {
      background-color: #ccc;
    }
  </style>
  <title>Flexbox Demo</title>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

垂直居中布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      border: 2px solid #000;
    }

    .item {
      flex: 1;
      margin: 10px;
      padding: 20px;
      background-color: #f0f0f0;
      border: 1px solid #000;
      text-align: center;
    }

    .item:nth-child(odd) {
      background-color: #ccc;
    }
  </style>
  <title>Flexbox Demo</title>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

换行布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 100vh;
      border: 2px solid #000;
    }

    .item {
      flex: 1 1 30%;
      margin: 10px;
      padding: 20px;
      background-color: #f0f0f0;
      border: 1px solid #000;
      text-align: center;
    }

    .item:nth-child(odd) {
      background-color: #ccc;
    }
  </style>
  <title>Flexbox Demo</title>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <

div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>