网站首页 > 基础教程正文

Web开发学习笔记(39)——CSS3(12)弹性盒子

ccvgpt 2024-11-09 11:23:02 基础教程 9 ℃

（1）flex-direction 属性：

flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。

其语法格式为：

flex-direction: row | row-reverse | column | column-reverse;

其属性值的意义如下所示：

属性值	描述
row	横向从左到右排列（左对齐），默认的排列方式。
row-reverse	反转横向排列（右对齐），从后往前排，最后一项排在最前面。
column	纵向排列
column-reverse	反转纵向排列，从后往前排，最后一项排在最上面。

<!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>Document</title>
    <style>
        .content{
            width:200px;
            height:200px;
            border:1px solid #C3C3C3;
            display:flex;
        }
        .content2{
            flex-direction: row-reverse;/*行对齐，主轴起点与终点相反*/
        }
        .content3{
            flex-direction: column;/*列对齐，主轴起点与终点相同*/
        }
        .content4{
            flex-direction: column-reverse;/*列对齐，主轴起点与终点相反*/
        }
        .box{
            width:50px;
            height:50px;
            color:black;
        }
    </style>
</head>
<body>
    <div class="content content1">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content content2">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content content3">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content content4">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
</body>
</html>

（2）flex-wrap 属性：

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

其语法格式为：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

其属性值的意义如下所示：

属性值	描述
nowrap	默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap	弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse	反转 wrap 排列。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

（3）align-items 属性：

align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

其语法格式为：

align-items: flex-start | flex-end | center | baseline | stretch;

其属性值的意义如下所示：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        align-items: stretch;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

（4）align-content 属性：

align-content 控制多行对齐方式，若只有一行则不起作用。

其语法格式为：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

其属性值的意义为：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 60px;
        color: black;
      }
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
      }
      .left {
        background-color: gray;
      }
      .center {
        background-color: silver;
      }
      .right {
        background-color: darkgray;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="left">div1块</div>
      <div class="center">div2块</div>
      <div class="right">div3块</div>
      <div class="left">div4块</div>
      <div class="center">div5块</div>
      <div class="right">div6块</div>
      <div class="left">div7块</div>
      <div class="center">div8块</div>
      <div class="right">div9块</div>
      <div class="left">div10块</div>
      <div class="center">div11块</div>
      <div class="right">div12块</div>
    </div>
  </body>
</html>

...
#content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;/*各行向弹性盒容器的起始位置堆叠*/
      }
    ...

...
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end;/*各行向弹性盒容器的结束位置堆叠*/
      }
...

...
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: center;/*各行向弹性盒容器的中间位置堆叠*/
      }
...

...
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;/*各行在弹性盒容器中平均分布*/
      }
...

      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;/*各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半*/
      }

练习一下：

在 body 中有两对带有 id 选择器的 div 标签，分别为 container 和 content。

id 选择器名为 container 的 div 标签在页面上显示为一个长和宽为 200 个像素的带边框的正方形，并设置它的子元素居中排布。

id 选择器名为 content 的 div 标签是它的子元素，在页面上呈正圆形显示在正方形边框的中部。

完成代码，看到如下效果：

<!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>Document</title>
    <style>
        #container{
            width:200px;
            height:200px;
            align-items:center;
            border-color:aquamarine;
            border:2px solid;
            display:flex;
            justify-content:center;
        }
        #content{
            width:100px;
            height:100px;
            border-radius:100%;
            background-color:rgb(125, 153, 253);
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="content"></div>
    </div>
</body>
</html>

上一篇：鸿蒙学习笔记(呼吸训练index篇) 呼吸模式训练
下一篇： JavaScript代码编写三原则(一):各司其责

网站首页 > 基础教程 正文

Web开发学习笔记(39)——CSS3(12)弹性盒子

练习一下：

猜你喜欢

网站首页 > 基础教程正文