掌握flex弹性布局

最新推荐文章于 2022-07-07 20:47:09 发布

流沙丶

最新推荐文章于 2022-07-07 20:47:09 发布

阅读量152

点赞数

分类专栏： Web前端疑难点

本文链接：https://blog.csdn.net/qq_40968745/article/details/96997676

版权

Web前端疑难点专栏收录该内容

8 篇文章 0 订阅

订阅专栏

flex布局是css3中一个非常好用的布局方式，它的主要思想是给容器盒子控制内部元素高度和宽度的能力，flex弹性盒子用来方便定义内部元素的排列规则和布局

flex常用属性的使用:
使用flex首先需要将父元素的display显示模式设置为flex给父元素控制内部元素的能力

  <style>
        section{
            width: 900px;
            height: 200px;
            border:1px solid #4182FA;
            margin: 200px auto;
            display: flex; /*显示模式为弹性布局：给盒子控制内部元素的能力*/
            /*flex-direction: column; !*设置主轴方向为Y*!*/
        }
        div:nth-child(1){
            background-color: #9a6e3a;
             flex: 1; /*设置每个div占一份*/
        }
          div:nth-child(2){
            background-color: red;
              flex: 1; /*设置每个div占一份*/
        }
          div:nth-child(3){
            background-color:green;
               flex:1; /*设置每个div占一份*/
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

首先将父元素 section的display更改为了 flex，然后设置每个div独占一份，这个份数（flex:1;可以随便更改，他都不会超出盒子范围）

效果
在这里插入图片描述

调整主轴的方向
flex分为了主轴和侧轴可以看成坐标系X Y，默认是水平方向为主轴，flex-decration设置主轴的方向

代码实例

   <style>
        section{
            width: 900px;
            height: 200px;
            border:1px solid #4182FA;
            margin: 200px auto;
            display: flex; /*显示模式为弹性布局：给盒子控制内部元素的能力*/
            flex-direction: column; /*设置主轴方向为Y*/
        }
        div:nth-child(1){
            background-color: #9a6e3a;
             flex: 1; /*设置每个div占一份*/
        }
          div:nth-child(2){
            background-color: red;
              flex: 1; /*设置每个div占一份*/
        }
          div:nth-child(3){
            background-color:green;
               flex:1; /*设置每个div占一份*/
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

效果
在这里插入图片描述

可以看出我们通过 flex-direction: column控制了主轴的方向，默认方向是X轴是 row

主轴上的排列方式
justify-content该属性设置元素在主轴方向的对齐方式，有5个参数：flex-start flex-end,space-between,pace-around

flex-start 是默认的排序方式，就是元素从左到右
flex-end 元素从右到左
space-between 左右对齐中间留有间距（最常用）
pace-around 给每个盒子都设置了左右外边距

代码实例（以最常用的space-between演示）

<style>
        section{
            width: 1200px;
            height: 200px;
            border:1px solid #4182FA;
            margin: 200px auto;
            display: flex; /*显示模式为弹性布局：给盒子控制内部元素的能力*/
            justify-content:space-between;  /*左右对齐中间留有间距（最常用）*/

        }
        div:nth-child(1){
            width: 300px;
            background-color: #9a6e3a;

        }
          div:nth-child(2){
              width: 300px;
            background-color: red;

        }
          div:nth-child(3){
              width: 300px;
            background-color:green;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

效果
在这里插入图片描述

元素宽度操作盒子宽度的时候是否换行
flex-wrap：内部元素排列不下时如何处理元素，默认是no-wrap不换行就在一行中强制显示

no-wrap默认不换行一行显示
wrap换行

代码实例

 <style>
        section{
            width: 900px;
            height: 200px;
            border:1px solid #4182FA;
            margin: 200px auto;
            display: flex; /*显示模式为弹性布局：给盒子控制内部元素的能力*/
            justify-content:space-between;
      
        }
        div:nth-child(1){
            width: 300px;
            background-color: #9a6e3a;

        }
          div:nth-child(2){
              width: 300px;
            background-color: red;

        }
          div:nth-child(3){
              width: 300px;
            background-color:green;
        }
          div:nth-child(4){
              width: 300px;
            background-color:palegreen;
        }
          div:nth-child(5){
              width: 300px;
            background-color:blueviolet;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

效果
在这里插入图片描述

如上代码可以看到5个div每个div宽度300，总共1500px，父盒子宽度1200所以可以看出flex-wrap默认是不换行的

将flex-wrap设置为wrap
代码实例

    <style>
        section{
            width: 900px;
            height: 200px;
            border:1px solid #4182FA;
            margin: 200px auto;
            display: flex; /*显示模式为弹性布局：给盒子控制内部元素的能力*/
            justify-content:space-between;
            flex-wrap: wrap; /*当宽度不够时换行*/

        }
        div:nth-child(1){
            width: 300px;
            background-color: #9a6e3a;

        }
          div:nth-child(2){
              width: 300px;
            background-color: red;

        }
          div:nth-child(3){
              width: 300px;
            background-color:green;
        }
          div:nth-child(4){
              width: 300px;
            background-color:palegreen;
        }
          div:nth-child(5){
              width: 300px;
            background-color:blueviolet;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

效果
在这里插入图片描述

控制盒子排列顺序

我们可以使用order控制盒子排列顺序数值越大的越在后面越小的在前面默认是 0

代码实例

<style>
        section{
            width: 900px;
            height: 200px;
            border:1px solid #4182FA;
            margin: 200px auto;
            display: flex; /*显示模式为弹性布局：给盒子控制内部元素的能力*/
            justify-content:space-between;
            flex-wrap: wrap;

        }
        div:nth-child(1){
            width: 300px;
            background-color: #9a6e3a;
          

        }
          div:nth-child(2){
              width: 300px;
            background-color: red;

        }
          div:nth-child(3){
              width: 300px;
            background-color:green;
        }
          div:nth-child(4){
              width: 300px;
            background-color:palegreen;
        }
          div:nth-child(5){
              width: 300px;
            background-color:blueviolet;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>

效果
在这里插入图片描述
默认元素的order都为0因此按照代码执行顺序排列，我们可以设置order设置元素的顺序

代码

          div:nth-child(3){
              width: 300px;
            background-color:green;
              order: -1; /*修改第三个div   order为-1*/
        }

效果
在这里插入图片描述

总结：flex弹性盒子给容器盒子控制内部元素高度和宽度的能力，在布局中可以方便我们进行布局，使用的非常的多比如小米官网等。

流沙丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
掌握flex弹性布局

flex布局是css3中一个非常好用的布局方式，它的主要思想是给容器盒子控制内部元素高度和宽度的能力，flex弹性盒子用来方便定义内部元素的排列规则和布局flex常用属性的使用:使用flex首先需要将父元素的display显示模式设置为flex给父元素控制内部元素的能力 <style> section{ width: 900px; ...
复制链接

扫一扫