Flex 布局

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

https://www.bilibili.com/video/BV14J4114768?p=419

一、概述

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。

Flex布局在移动端支持好，PC端支持不好。

二、Flex 容器

我们把一个容器的 display 属性值改为 flex 或者 inline-flex。 完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

  • 元素排列为一行 (flex-direction 属性的初始值是 row)。
  • 元素从主轴的起始线开始。
  • 元素不会在主维度方向拉伸，但是可以缩小。
  • 元素被拉伸来填充交叉轴大小。
  • flex-basis 属性为 auto。
  • flex-wrap 属性为 nowrap。

这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

<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>
        div {
            margin: auto;
            width: 80%;
            height: 600px;
            background-color: aqua;
            display: flex;
        }
        span{
            background-color: burlywood;
            height: 50px;
            margin: 20px;
            width: 100px;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <span>你好</span>
        <span>你好</span>
        <span>你好</span>
    </div>
</body>

 

 

 

 

三、justify-content

justify-content属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start，元素从容器的起始线排列。但是你也可以把值设置为flex-end，从终止线开始排列，或者center，在中间排列.

你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。

在实例中尝试下列justify-content属性的值：

  • stretch
  • flex-start
  • flex-end
  • center
  • space-around
  • space-between

 

justify-content: space-between;

 

 

justify-content: space-around;

 

四、align-items 

align-items 属性可以使元素在交叉轴方向对齐。

这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。

你也可以设置align-items的值为flex-start，使flex元素按flex容器的顶部对齐, flex-end 使它们按flex容器的下部对齐, 或者center使它们居中对齐. 在实例中尝试——我给出了flex容器的高度，以便你可以看到元素在容器中移动。看看如果更改 align-items的值为下列值会发生什么：

  • stretch
  • flex-start
  • flex-end
  • center
align-items: stretch;

align-items:flex-start;

align-items:flex-end;

 

 

align-items:center;

五、用flex-wrap实现多行Flex容器

 

六、align-content

 

 

 

七、简写属性 flex-flow

八、 flex 元素上的属性

 

 

 

<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>
        /* .box {
            display: flex;
            align-content: center;
            width: 30%;
            height: 600px;
            flex-wrap: wrap;
            background-color: aqua;
            flex-flow: column nowrap;

          }

          .box > div {
              background-color: burlywood;
              margin: 20px;
          } */

          .box{
              width: 60%;
              display: flex;
              background-color: coral;
          }
          
          .box >div{
              margin: 10px;

          }

          .box div:nth-child(1){
              width: 50px;
              height: 50px;
              background-color: cornflowerblue;
          }

          .box div:nth-child(2){
              flex:1;
              background-color:yellow;
          }

          .box div:nth-child(3){
              flex:2;
              background-color:yellow;
          }

          .box div:nth-child(4){
              width: 50px;
              height: 50px;
              background-color: cornflowerblue;
          }
        
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
</body>

 

 

 

posted on 2022-01-15 23:59  苹果园dog  阅读(51)  评论(0)  编辑  收藏  举报

导航