CSS3 弹性布局display:flex详解

最新推荐文章于 2024-05-03 19:19:43 发布

LJXLQLIVE

最新推荐文章于 2024-05-03 19:19:43 发布

阅读量2.8k

点赞数 5

分类专栏： CSS 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/LJXLQXX/article/details/122417951

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

弹性布局是CSS3新增的一种布局思想，他将盒子分为容器与项目

容器：最外层盒子设置display：flex，容器设置弹性布局后，会清除容器内的浮动布局

项目：容器下的子盒子，！注意不包括项目下的内容，但项目也可设置为容器

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    /* 此时main为容器 */
    main{
      width: 100%;
      height: 400px;
      display: flex;
    }
    /* section为项目 */
    section{
      width: 200px;
      height: 200px;
      background-color: red;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <main>
    <section>
      <!-- div为项目下的内容 -->
      <div></div>
    </section>
    <section></section>
    <section></section>
  </main>
</body>

设置弹性布局后，沿着容器的水平方向会存在一条轴线为主轴，与其对应垂直方向会存在一条交叉轴，项目默认为上图的主轴进行排列。

容器属性：justify-content和align-items分别为主轴和交叉轴排布样式

    /* 此时main为容器 */
    main{
      width: 100%;
      height: 400px;
      display: flex;
      /* 主轴靠右对齐 */
      justify-content: flex-end;
      /* 主轴居中对齐 */
      justify-content: center;
      /* 主轴左右两端对齐 */
      justify-content: space-between;
      /* 主轴对齐，项目间的间距为两端的两倍 */
      justify-content: space-around;
      /* 主轴对齐，项目间的间距与两端间距相等 */
      justify-content: space-evenly;
    }
    /* section为项目 */
    section{
      width: 200px;
      height: 200px;
      background-color: red;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <main>
    <section></section>
    <section></section>
    <section></section>
  </main>

主轴靠右对齐 justify-content: flex-end;

主轴居中对齐 justify-content: center;

主轴左右两端对齐 justify-content: space-between;

主轴对齐，项目间的间距为两端的两倍 justify-content: space-around;

主轴对齐，项目间的间距与两端间距相等 justify-content: space-evenly;

align-items交叉轴属性

/* 此时main为容器 */
    main{
      width: 100%;
      height: 400px;
      display: flex;
      /* 交叉轴居中对齐 */
      align-items: center;
      /* 交叉轴底部对齐 */
      align-items: flex-end;
      border: 5px solid rebeccapurple;
    }

常用 justify-content: center; align-items: center;作为文本上下左右居中对齐

/* 此时main为容器 */
    main{
      width: 100%;
      height: 400px;
      display: flex;
      /* 轴线旋转 */
      flex-direction: column;
      /* 镜像翻转 */
      flex-direction: row-reverse;
      /* 轴线旋转加镜像翻转 */
      flex-direction: column-reverse;
      border: 5px solid rebeccapurple;
    }
    /* section为项目 */
    section{
      width: 200px;
      height: 200px;
      background-color: red;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <main>
    <section>1</section>
    <section>2</section>
    <section>3</section>
  </main>

轴线旋转 flex-direction: column此时主轴与交叉轴旋转互换

镜像翻转 flex-direction: row-reverse;反向排布

轴线旋转加镜像翻转 flex-direction: column-reverse;

 /* 此时main为容器 */
    main{
      width: 500px;
      height: 400px;
      display: flex;
      /* 默认,不换行 */
      flex-wrap: nowrap;
      /* 允许换行 */
      flex-wrap: wrap;
      margin: 50px auto;
      border: 5px solid rebeccapurple;
    }

默认属性,不换行 flex-wrap: nowrap;当容器宽度比里面项目宽度小的时候，项目会等比缩放而不会换行显示

允许换行 flex-wrap: wrap;

项目属性

    section:nth-of-type(1){
      order: 2;
    }
    section:nth-of-type(2){
      order: 3;
    }
    section:nth-of-type(3){
      order: 1;
    }

order属性后面跟数字，数字越大，项目越靠前排列

    section:nth-of-type(1){
      order: 1;
    }
    section:nth-of-type(2){
      order: 2;
      /* 居中 */
      align-self: center;
      /* 靠底部 */
      align-self: flex-end;
      /* 靠顶部 */
      align-self: flex-start;
    }
    section:nth-of-type(3){
      order: 3;
    }

align-self单个项目样式设定center为居中

    section:nth-of-type(1){
      width: 200px;
    }
    section:nth-of-type(2){
      flex-grow: 1;
    }
    section:nth-of-type(3){
      flex-grow: 4;
    }

flex-grow占当前同行剩余空间的等份数，如果容器没有设置固定的宽度，则设置了该属性的项目会随着容器宽度改变而改变，体现出了弹性盒子的“弹性”

 /* 此时main为容器 */
    main{
      width: 500px;
      height: 400px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 50px auto;
      border: 5px solid rebeccapurple;
    }
    /* section为项目 */
    section{
      width: 200px;
      height: 200px;
      background-color: red;
      border: 1px solid blue;
    }
    section:nth-of-type(1){
      flex-shrink: 0;
    }
    section:nth-of-type(2){
      flex-shrink: 1;
    }
    section:nth-of-type(3){
      flex-shrink: 0;
    }

flex-shrink为容器不足的情况下，该项目是否等比缩小0为不允许等比缩小，1为默认值，允许等比缩小

    /* section为项目 */
    section{
      width: 200px;
      height: 200px;
      background-color: red;
      border: 1px solid blue;
    }
    section:nth-of-type(1){
      flex-basis: 100px;
    }
    section:nth-of-type(2){
      flex-basis: 300px;
    }
    section:nth-of-type(3){
      flex-basis: 50px;
    }

flex-basis为项目宽度，比width权重高