CSS之flex布局

一直学习的程序员L

已于 2023-08-02 22:38:02 修改

阅读量4.9k

点赞数 3

文章标签： css 前端

于 2023-06-30 19:20:33 首次发布

本文链接：https://blog.csdn.net/weixin_45604020/article/details/131477225

版权

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>