首页 前端知识 CSS之Flex布局

CSS之Flex布局

2024-02-11 10:02:12 前端知识 前端哥 34 821 我要收藏

flex布局

  • 一、弹性盒子介绍
  • 二、开启弹性盒子
  • 三、主轴对齐方式 justify-content
  • 四、侧轴对齐方式 align-items
  • 五、修改主轴方向
  • 六、弹性伸缩比 flex
  • 七、弹性换行 flex-wrap
  • 八、行对齐方式 align-content

在这里插入图片描述

一、弹性盒子介绍

  • 作用: 和浮动一样都用于网页布局,但flex比浮动要更强大。flex不会产生脱标现象,布局网页更灵活、更简单 (推荐使用)
  • 组成: 弹性容器+弹性盒子+主轴+侧轴

在这里插入图片描述

二、开启弹性盒子

  • 在父元素上添加下列代码,表示开启弹性盒子
  • 默认效果:
    • 盒子沿主轴方向排列——主轴方向可以改变,主轴在哪个方向盒子就沿哪个方向排列
    • 盒子自动挤压——盒子自动缩小适应父元素大小让所有子元素在一行显示
    • 盒子自动拉伸——若父元素没有设置高度,那么子元素会自动拉伸高度适应父元素
dispaly:flex; 开启弹性盒子

在这里插入图片描述

三、主轴对齐方式 justify-content

  • 属性名:justify-content
  • 属性值
    在这里插入图片描述
  • 效果图

在这里插入图片描述在这里插入图片描述

  • 注意:在父元素上添加属性
  justify-content: flex-start;  
  justify-content: flex-end;  
  justify-content: center;  
  justify-content: space-between;  
  justify-content: space-around;  
  justify-content: space-evenly;

四、侧轴对齐方式 align-items

  • 属性名:
    • align-items: 给容器内所有弹性盒子设置侧轴对齐方式
    • align:self:单独给某个弹性盒子设置侧轴对齐方式
  • 属性值:
    在这里插入图片描述
  • 效果图

在这里插入图片描述

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

  align-self: stretch;
  align-self: center;
  align-self: flex-start;
  align-self: flex-end;

五、修改主轴方向

上诉说到弹性布局默认排列方向是沿主轴(水平)方向排列的,主轴在哪里盒子就沿哪里排列。如果要更改为垂直方向排列,那么就要改变主轴的方向。

  • 属性名:flex-direction

  • 属性值:
    在这里插入图片描述
    在这里插入图片描述

  • 注意:若主轴方向变化那么侧轴也会发生变化

  • 转换示例:

<style>
  div{  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        width: 400px;  
        height: 400px;  
        background-color: #2c5f44;  
      }  
  span{  
        font-size: 30px;  
        color: white;  
      }  
  img{  
        width: 300px;  
        height: 300px;  
      }           
</style>  

<div>  
  <span>肖战</span>  
  <img src="/img/xz.jpeg">  
</div>  

在这里插入图片描述

六、弹性伸缩比 flex

  • 作用: 用于调整弹性盒子在主轴方向上所占的尺寸大小
  • 属性名:flex
  • 属性值: 整数数字,表示占用父级剩余尺寸的分数
  • 注意: 弹性盒子没有设置尺寸的情况下,主轴方向尺寸靠内容撑开,侧轴方向默认拉伸
    <style>  
      .box{  
        display: flex;  
        width: 800px;  
        height: 400px;  
        background-color: #2c505f;  
      }  
      .box1{  
        flex: 1;  
        height: 200px;  
        background-color: #2c5f44;  
      }  
      .box2{  
        flex: 2;  
        height: 200px;  
        background-color: rgba(232, 88, 70, 0.39);  
      }  
      .box3{  
        flex: 3;  
        height: 200px;  
        background-color: rgba(212, 232, 228, 0.74);  
      }  
    </style>  
<body>  
<div class="box">  
  <div class="box1"></div>  
  <div class="box2"></div>  
  <div class="box3"></div>  
</div> 

在这里插入图片描述

七、弹性换行 flex-wrap

上面说过弹性盒子会自动挤压或拉伸,意味着即使一行盛不下所有盒子也会默认挤压到一行里面,不会自动换行。因此如果想要实现换行效果则需设置弹性换行。

在这里插入图片描述

  • 属性名:flex-wrap
  • 属性值:
    • wrap:换行
    • nowrap:不换行
  • 注意: 在父元素里设置
  • 示例:
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      dl{
        display: flex;
        flex-wrap: wrap;
        width: 900px;
        height: 500px;
        background-color: #507fbc;
        margin: 50px auto;

      }
      dd{
        margin-top: 10px;
        width: 180px;
        height: 230px;
        background-color: skyblue;
      }
    </style>
</head>
<body>

  <dl>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </dl>
</body>

在这里插入图片描述

八、行对齐方式 align-content

  • 注意:对只有一行的弹性盒子不生效
  • 属性名:align-content
  • 属性值:
    在这里插入图片描述
  • 效果图:
    https://www.runoob.com/try/playit.php?f=playcss_align-content&preval=space-around
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1698.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!