CSS弹性布局骰子1-6

前端叭叭说
186 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

CSS弹性布局骰子1-6

1. Flex布局

Flex布局是弹性布局，任何容器都可以使用flex布局。

div {
  display: flex;
}

2. 容器

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为 Flex 项目（flex item），简称"项目"。

容器上的属性有6个：

flex-direction: row | column | row-reverse | column-reverse;
flex-wrap: wrap | nowrap | wrap-reverse;
flex-flow: <flex-direction> | <flex-wrap>;
align-items: center | flex-start | flex-end | stretch | baseline;
justify-content: center | flex-start | flex-end | space-between | space-around;
align-content: center | flex-start | flex-end | space-between | space-around | stretch;

3. 项目

被容器包裹的所有子元素称为项目。

项目上的属性有：


order: 1,-1,0,...<number>
flex-shrink: 1,...<number>
flex-grow: 0,...<number>
flex-basic: <length> | auto
flex: <flex-grow> | <flex-shrink> | <flex-basic>
align-self: 修改项目继承容器的 *align-items*的属性值

4. align-items/align-self/align-content 的区别

  • align-items: 属性需要施加在 flex 容器上，它规定的是 flex 容器中所有 项目 在交叉轴中的对齐方式；
  • align-self: 属性则施加在 flex 容器中的 项目 上，允许单个项目有与其他项目不一样的对齐方式，它覆盖了外部容器规定的 align-items 属性，同样也只规定在交叉轴上的对齐方式；
  • align-content: 属性加在flex 容器，并仅对多行的项目起作用。

5. 布局案例：布局骰子1-6

1.png

<!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>示例1</title>
  <style>
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px auto;
      width: 120px;
      height: 120px;
      background-color: antiquewhite;
      border-radius: 6px;
      padding: 12px;
    }
    .dot {
      width: 16px;
      height: 16px;
      background-color: black;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="box">
    <span class="dot"></span>
  </div>
</body>
</html>

2.png

<!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>示例2</title>
  <style>
    .box {
      display: flex;
      justify-content: space-between;
      margin: 50px auto;
      width: 120px;
      height: 120px;
      background-color: antiquewhite;
      border-radius: 6px;
      padding: 12px;
    }
    .dot {
      width: 16px;
      height: 16px;
      background-color: black;
      border-radius: 50%;
    }
    .dot2 {
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <div class="box">
    <span class="dot"></span>
    <span class="dot dot2"></span>
  </div>
</body>
</html>

3.png

<!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>示例3</title>
  <style>
    .box {
      display: flex;
      justify-content: space-between;
      margin: 50px auto;
      width: 120px;
      height: 120px;
      background-color: antiquewhite;
      border-radius: 6px;
      padding: 12px;
    }
    .dot {
      width: 16px;
      height: 16px;
      background-color: black;
      border-radius: 50%;
    }
    .dot2 {
      align-self: center;
    }
    .dot3 {
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <div class="box">
    <span class="dot"></span>
    <span class="dot dot2"></span>
    <span class="dot dot3"></span>
  </div>
</body>
</html>

4.png

<!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>示例4</title>
  <style>
    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin: 50px auto;
      width: 120px;
      height: 120px;
      background-color: antiquewhite;
      border-radius: 6px;
      padding: 12px;
    }
    .dot {
      width: 16px;
      height: 16px;
      background-color: black;
      border-radius: 50%;
      margin: 0 18px;
    }
  </style>
</head>
<body>
  <div class="box">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</body>
</html>

5.png

<!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>示例5</title>
  <style>
    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin: 50px auto;
      width: 120px;
      height: 120px;
      background-color: antiquewhite;
      border-radius: 6px;
      padding: 12px;
    }
    .dot {
      width: 16px;
      height: 16px;
      background-color: black;
      border-radius: 50%;
      margin: 0 12px;
    }
    .dot2 {
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <div class="box">
    <span class="dot"></span>
    <span class="dot dot2"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</body>
</html>

6.png

<!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>示例6</title>
  <style>
    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin: 50px auto;
      width: 120px;
      height: 120px;
      background-color: antiquewhite;
      border-radius: 6px;
      padding: 12px;
    }
    .dot {
      width: 16px;
      height: 16px;
      background-color: black;
      border-radius: 50%;
      margin: 0 18px;
    }
  </style>
</head>
<body>
  <div class="box">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</body>
</html>

6. 小结

本文主要介绍了flex布局的基本概念，使用flex布局骰子1-6，内容比较基础，希望对大家有帮助！

avatar
文章
阅读
粉丝