flex弹性盒子

最新推荐文章于 2024-06-13 09:37:29 发布

呆码王子

最新推荐文章于 2024-06-13 09:37:29 发布

阅读量111

点赞数 1

分类专栏： HTML 文章标签： css css3 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/L123456llljdjdbd/article/details/129539190

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

flex(弹性盒子，伸缩盒)

-是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局

-flex可以使元素具有弹性，让元素可以根据页面的大小的改变而改变

-弹性容器

-要使用弹性盒，必须先将一个元素设置为弹性容器

-通过display来设置弹性容器

display:flex 设置块级弹性容器

display:inline-flex 设置为行内的弹性容器

-弹性元素

-弹性容器的直接子元素是弹性元素（弹性项）

注意：一个元素可以同时是弹性容器和弹性元素

一:弹性容器的属性

1:flex-direction 2:flex-wrap

3:flex-flow 4:justify-content

5:align-items 6:align-content

1:flex-direction: ; 指定容器中弹性元素的排列方式

可选值：

row 默认值，弹性元素在容器中水平排列（左向右）

主轴-自左向右

row-reverse 弹性元素在容器中反向水平排列（右向左）

主轴-自右向左

column 弹性元素纵向排列（自上向下）

主轴-自上向下

column-reverse 弹性元素纵向排列（自下向上）

主轴-自下向上

主轴：弹性元素的排列方向称为主轴

侧轴：与主轴垂直方向的称为侧轴

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul {
        width: 500px;
        border: 10px red solid;
        /* 将ul设置为弹性容器 */
        display: flex;
        flex-direction:column-reverse;
      }
      li {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        font-size: 50px;
        line-height: 100px;
        text-align: center;
      }
      li:nth-child(2) {
        background-color: pink;
      }
      li:nth-child(3) {
        background-color: orange;
      }
      /* span{
        background-color: pink;
        display: inline-flex;
      } */
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <!-- <span>
      <strong>1</strong>
      <strong>2</strong>
      <strong>3</strong>
    </span> -->
  </body>
</html>

2: flex-wrap: ;设置弹性元素是否在弹性容器中是否自动换行

可选值：

nowrap 默认值，元素不会自动换行

wrap 元素沿着辅轴方向自动换行

wrap-reverse 元素沿着辅轴反方向换行

3:flex-flow:wrap和direction的简写属性，且没有顺序要求

默认值 row nowrap

4:justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）

可选值：

flex-start 元素沿着主轴起边排列

flex-end 元素沿着主轴终边排列

center 元素居中排列

space-around 空白分布到元素的两侧

space-between 空白均匀分布到元素间

space-evenly 空白分布到元素的单侧（兼容性差一些）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul {
        width: 500px;
        height: 500px;
        border: 10px red solid;
        display: flex;
        /* flex-direction: row; */
        /* flex-wrap: wrap; */
        flex-flow: row wrap;
        justify-content:flex-start;
        /* align-items: stretch; */
        align-content: center;
      }
      li {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        font-size: 50px;
        line-height: 100px;
        text-align: center;
      }
      li:nth-child(2n) {
        background-color: pink;
      }
      li:nth-child(3n) {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>1</li>
       <li>2</li>
      <li>3</li>
      <li>1</li>
      <li>2</li>
      <li>3</li> 
    </ul>
  </body>
</html>

1: flex-direction: row;

2:flex-wrap:wrap-reverse;

3: flex-flow:row wrap;

4: justify-content:space-around;

5: align-items 在辅轴上如何对齐-元素间的关系

可选值：

stretch 默认值，将同一行元素的长度设置为相同的值

flex-start 元素不会拉伸，沿着辅轴起边对齐

flex-end 元素不会拉伸，沿着辅轴终边对齐

center 居中对齐

baseline 基线对齐（用的不对）

6: align-content: ;辅轴空白空间的分布

可选值：

flex-start 元素沿着辅轴起边排列

flex-end 元素沿着辅轴终边排列

center 元素居中排列

space-around 空白分布到元素的两侧

space-between 空白均匀分布到元素间

space-evenly 空白分布到元素的单侧（兼容性差一些）

需求：在弹性盒子里，元素时间正中间居中对齐

justify-content: center;

align-items: center;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul {
        width: 300px;
        height: 600px;
        border: 10px red solid;
      }
      li {
        width: 100px;
        background-color: #bfa;
        font-size: 50px;
        line-height: 100px;
        text-align: center;
      }
      li:nth-child(2) {
        background-color: pink;
      }
      li:nth-child(3) {
        background-color: orange;
      }
      li:nth-child(4) {
        background-color: red;
      }
      li:nth-child(5) {
        background-color: cadetblue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2
        <div>2</div>
      </li>
      <li>3
        <div>3</div>
        <div>3</div>s
      </li>
    </ul>
  </body>
</html>

弹性元素的属性

1、order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2、flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

3、flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，

即项目的本来大小。

5、flexflex：属性是flex-grow, flex-shrink 和 flex-basis的简写，

默认值为0 1 auto。后两个属性可选。

6、align-self：允许单个项目有与其他项目不一样的对齐方式，

可覆盖align-items属性。默认值为auto，

表示继承父元素的align-items属性，如果没有父元素，

则等同于stretch。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul {
        width: 500px;
        border: 10px red solid;
        display: flex;
        flex-direction: column;
        align-items: flex-end;

      }
      li {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        font-size: 50px;
        line-height: 100px;
        text-align: center;
      }
      li:nth-child(1){
        flex-grow: 1;
      }
      li:nth-child(2) {
        background-color: pink;
        /* order: -1; */
        /* flex-grow: 1; */
        /* flex-shrink: 2; */
        /* flex-basis: 200px; */
        align-self:center;
      }
      li:nth-child(3) {
        background-color: orange;
        /* order: -2; */
        /* flex-grow: 1; */
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <!-- <li>1</li>
      <li>2</li>
      <li>3</li> -->
    </ul>
  </body>
</html>

呆码王子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex弹性盒子

5、flexflex：属性是flex-grow, flex-shrink 和 flex-basis的简写，4、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。3、flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。2、flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。表示继承父元素的align-items属性，如果没有父元素，-flex可以使元素具有弹性，让元素可以根据页面的大小的改变而改变。
复制链接

扫一扫