投稿
  1. 极客之音首页
  2. 前端开发

flex弹性布局知识点

小半 • • 前端开发 • 阅读 184

导读：本篇文章讲解 flex弹性布局知识点，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

文章目录

前言

好好学习，记住这些属性，以后用处会很大的。

提示：以下是本篇文章正文内容，下面案例可供参考

一、flex弹性布局

布局原理：
flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。总结：flex布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

注意：
1、当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
2、伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局（别称）

定义：
采用flex布局的元素，称为flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为flex项目，简称“项目”。

举例：
div就是flex父容器，span就是子容器flex项目，子容器可以横向排列也可以纵向排列。

二、flex布局父项属性

父项常见属性

  1. flex-direction：设置主轴的方向；
  2. justify-content：设置主轴上的子元素排列方式；
  3. flex-wrap：设置子元素是否换行；
  4. align-content：设置侧轴上的子元素的排列方式（多行）；
  5. align-items：设置侧轴上的子元素排列方式（单行）；
  6. flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap。

主轴与侧轴
1、默认主轴方向就是X轴方向，水平向右
2、默认侧轴方向就是Y轴方向，垂直向下

1.flex-direction

属性值以及说明：
row：从左到右；（默认值）
row-reverse从右到左；（反方向）
column：从上到下；
column-reverse：从下到上；

代码如下（示例）：

    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            flex-direction: row;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: powderblue;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

默认的效果图：
在这里插入图片描述
代码如下（示例）：

   div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* Y轴为主轴 */
            flex-direction: column;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: powderblue;
        }

Y轴的效果图：
在这里插入图片描述

代码如下（示例）：

   div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            flex-direction: row-reverse;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: powderblue;
        }

看数字，注意盒子顺序发生了变化，效果图如下：

在这里插入图片描述

2.justify-content

justify-content属性定义了项目在主轴上的对齐方式。

  1. flex-start：默认值从头部开始，如果主轴是x轴，则从左往右；
  2. flex-end：从尾部开始排列；
  3. center：在主轴居中对齐（如果主轴是x轴则水平居中）
  4. space-around：平分剩余空间；
  5. space-between：先两边贴边，再平分剩余空间（重要）

代码如下（示例）：

  <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 先两边贴边，再平分剩余空间 */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: powderblue;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

先两边贴边，再平分剩余空间的效果图如下：
在这里插入图片描述

代码如下（示例）：

  div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 平分剩余空间 */
            justify-content: space-around;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: powderblue;
        }

平分剩余空间的效果图：
在这里插入图片描述
代码如下（示例）：

  div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
             /* 在主轴居中对齐 */
            justify-content: center;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: powderblue;
        }

在主轴居中对齐的效果图：
在这里插入图片描述
代码如下（示例）：

  div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
             /* 从尾部开始排列 */
            justify-content: center;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: powderblue;
        }

注意看数字，从尾部开始排列的效果图：
在这里插入图片描述

3.flex-wrap

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

  • nowrap:默认值，不换行；
  • wrap：换行。

代码如下（示例）：

    <style>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: powderblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>

    </div>
</body>

在不换行的情况下，盒子的宽度会自动缩小以便于一行可以放下所有盒子，默认不换行的效果图：
在这里插入图片描述

  div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            flex-wrap: wrap;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: powderblue;
            margin: 10px;
        }

换行的效果图：
在这里插入图片描述

4.align-content

该属性是控制子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

  • flex-start：默认值在侧轴的头部开始排列；
  • flex-end：在侧轴的尾部开始排列；
  • center：在侧轴中间显示；
  • space-around：子项在侧轴平分剩余空间；
  • space-between：子项在侧轴先分布在两头，再平分剩余空间；
  • stretch：设置子项元素高度平分元素高度；

代码如下（示例）：

    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            flex-wrap: wrap;
            align-content: center;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: powderblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>

    </div>
</body>

多行居中的效果：
在这里插入图片描述

5.align-items

该属性是控制子项在侧轴
（默认是Y轴）上的排列方式，在子项为单行的时候使用；

  • flex-start：默认值，从上到下；
  • flex-end：从下到上；
  • center：挤在一起居中（垂直居中）；
  • stretch：拉伸；

三、flex布局子项属性

1、flex子项占的份数；
2、align-self控制子项自己在侧轴的排列方式；
3、order属性定义子项的排列顺序（前后顺序）；

1.flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份。

代码如下（示例）：

 <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2) {
            flex: 1;
            background-color: blue;
        }
        
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: magenta;
        }
        
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        
        p span {
            flex: 1;
        }
        
        p span:nth-child(2) {
            flex: 2;
            background-color: magenta;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span><span>2</span><span>3</span>
    </p>
</body>

效果图：
在这里插入图片描述

2.align-self

align-self属于允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性；默认值为auto，表示继承父元素的align-items属性，如果没有父属性，则等同于stretch。

语法：
div span:nth-child(3) {
//设置自己在侧轴上的排列方式
align-self: flex-end;
}

代码如下（示例）：

    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: blanchedalmond;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: pink;
            margin-right: 5px;
        }
        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div><span>1</span><span>2</span><span>3</span></div>
</body>

效果图：
在这里插入图片描述

3.order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
注意：和z-index不一样。

接着上面的例子加了一行代码，代码如下（示例）：

  div span:nth-child(2) {
            order: -1;
        }

效果图：
在这里插入图片描述
给第二个盒子加了order属性之后，它就排到第一个盒子前面去了。

总结

flex布局的属性很多其实都是相同的属性值，只要注意区分主轴侧轴和父项子项，使用起来就不会很难的，后面会继续更新一些好玩的案例来一起学习flex布局。

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/6298.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！