flex弹性布局的属性

最新推荐文章于 2024-08-26 17:21:03 发布

温柔雨哥a

最新推荐文章于 2024-08-26 17:21:03 发布

阅读量1.1k

点赞数 4

分类专栏： flex弹性布局的属性文章标签： css html

本文链接：https://blog.csdn.net/CSDN_bare/article/details/103712495

版权

flex弹性布局的属性专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 容器的常用属性

属性用于设置容器，也就是父盒子

felx-direction：设置主轴的方向，也就是项目横向排列还是纵向排列
justify-content：设置主轴上的子元素的排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-directon 和 flex-wrap

1.1flex-direction

在flex布局中，分为主轴和侧轴

默认情况下，水平方向为主轴，水平向右，垂直方向为侧轴，垂直向下
在这里插入图片描述
flex-direction 属性可以改变默认的主轴设置

设置行为主轴

设置水平方向为主轴，项目从左向右排列

body {
    background-color: #ccc;
}

div {
    display:flex;
    /*设置容器的主轴为X轴，也就是行为主轴，此值为默认值*/
    flex-direction: row;
    width: 800px;
    height: 400px;
    background-color: #000;
}

span {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid black;
}

设置主轴反转

反转主轴

设置水平方向为主轴，项目从右向左排列

只需要将如下代码

flex-direction: row;

修改为

flex-direction: row-reverse;

设置列为主轴

设置主轴为垂直方向，项目从上到下排列

设置 flex-direction 的值 column

flex-direction: column;

将上面的代码改为

flex-direction: column-reverse;

项目从下到上排列

总结

主轴不是固定的
项目永远沿主轴排列，所以设置主轴为水平方向，项目1行排列；设置主轴为垂直方向，项目1列排

1.2 justify-content

设置主轴上项目的排列方式

使用此属性之前，要确定主轴是哪一个，主轴不一样，设置的值也不一样

flex-start 默认值，从头部开始，如果主轴是x轴，则从左到右
flex-end 从尾部开始排列，如果主轴是y轴，则从又到左
center 在主轴居中对齐，如果主轴是x轴，则水平居中
spance-around 评分剩余空间
spance-between 先两边贴边，再评分剩余空间

1.2.1 X轴为主轴时

flex-start

body {
    background-color: #ccc;
}

div {
    display:flex;
    /*设置容器的主轴为X轴，也就是行为主轴，此值为默认值*/
    flex-direction: row;
    /* 设置项目从左到右排列 */
    justify-content: flex-start;
    width: 800px;
    height: 400px;
    background-color: #000;
}

span {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid black;
}

效果图
在这里插入图片描述
这与没设置 justify-content:flex-start 没有区别

修改 justiry-content 的值为 flex-end

flex-end

/* 设置项目从左到右排列 */
justify-content: flex-end;

在这里插入图片描述
注意，这里仅仅是改变了项目的起始方向，并没有改变项目的排列顺序，而我们上面说的 flex-direction 的翻转会改变项目的排列顺序

将 justify-content 的值设置为 center，所有元素居中显示，两边编剧一致

center

justify-content:center;

在这里插入图片描述
spance-around

justify-content:space-around;

问题：为什么明明是评分剩余空间，项目的中间距离，看起来是左侧两侧边距的2倍？
在这里插入图片描述
注意：

容器-所有项目宽度之和，就是主轴上剩余的空间，这里的平分是指项目之间的距离平分这些空间
如果设置项目的flex:1，而不是设置项目的固定宽度，那么无论 justify-content
的值设置为什么，都没有效果，因为项目会自动占满整个容器宽度

space-between

justify-content:space-between;

在这里插入图片描述
1.3 flex-wrap

传统布局中，设置子盒子浮动后，如果1行占不下，会自动另起一行
但是在 flex 布局中，则不然

html 代码

<div>
    <span>10</span>
    <span>20</span>
    <span>30</span>        
    <span>40</span>
</div>

css 代码

body {
    background-color: #ccc;
}

div {
    display:flex;
    /*设置容器的主轴为X轴，也就是行为主轴，此值为默认值*/
    flex-direction: row;
    /* 设置项目从左到右排列 */
    justify-content:flex-start;
    width: 500px;
    height: 400px;
    background-color: #000;
}
span {
    width: 150px;
    height: 100px;
    background-color: #fff;
    border: 1px solid black;
}

我们发现，当1行站不下所有项目时，会自动缩小项目的宽度

如果不希望改变宽度，而是另起一行，只需要在容器中据加入如下设置即可

flex-wrap: wrap;

效果图
在这里插入图片描述
思考：为什么两行之间的垂直间距这么大？

扩展
如果主轴为Y轴，则效果如下
在这里插入图片描述
1.4 align-items

设置项目在侧轴上的排列方式

但是此属性适合项目为单行时

侧轴默认是Y轴，当然可以改变

flex-start 默认值，从上到下
flex-end 从下到上
center 挤在一起居中
stretch 拉伸

1.4.1 解决的问题

当前只能通过 justify-content 设置项目在主轴上的位置

div {
    display:flex;
    /*设置容器的主轴为X轴，也就是行为主轴，此值为默认值*/
    flex-direction: row;
    /* 设置项目从左到右排列 */
    justify-content:center;          
    width: 500px;
    height: 400px;
    background-color: #000;
}

在这里插入图片描述
无法设置项目在侧轴上居中，对于当前来说，侧轴是y轴，那么也就是设置垂直居中

有人可能想到做如下修改

flex-direction: column;

但这样只是修改了主轴为y轴
在这里插入图片描述
当前属性就是用来解决这个问题的
1.4.2 设置侧轴居中

只需要在容器中加入
在这里插入图片描述
效果图
思考：如果主轴为y轴呢？

效果图

当然此属性的只也可以设置为其他几个

其他几个值都比较简单，稍微需要注意的是 stretch ，意思是拉伸，如果主轴是x轴，那么就会拉伸项目的高度与父元素一样高，但是项目不能设置固定高度，否则无效
1.4.5 align-content

设置侧轴上的子元素的排列方式

这与 align-items 相似，区别在于，此属性用来设置多行项目（也就是项目换行）时的排列方式，在单行项目下时没有效果的

flex-start 默认值，在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴的中间显示
space-around 子项在侧轴评分剩余空间
space=between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素

flex-start
在这里插入图片描述
思考，主轴为y轴时如何排列

flex-end
在这里插入图片描述
center

space-around

space-between

align-items 和 align-content 对比

align-items 适用于单行情况下，只有上对齐，下对齐，居中和拉伸
align-content 适用于多行，单行下无效，可以设置对上对齐、下对齐、居中、拉伸一级平分剩余空间等

1.4.6 flex-flow
flex-direction 和 flex-wrap 的复合属性
flex-flow: column nowrap;
1.5 项目常见属性

flex 项目占的份数
align-self 控制子项自己在侧轴的排列方式，前面的align-items 和 align-content
是对所有子项应用相同的排列方式，而这个属性是对单个子项应用个性化的排列方式
order 定义项目的排列顺序（前后顺序）
1.5.1 flex

定义子项目分配剩余空间，用 flex 属性表示占多少分

分配的容器的剩余空间会增加到元素的宽度上
项目一旦设置固定宽度，就不会参与分配剩余空间
flex 的默认值为0，0就表示不参与分配剩余空间
项目一旦设置了flex，就不能再设置固定宽度
如果flex 的值为其他数字，则表示在分配剩余空间时所占的分数

圣杯效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 圣杯布局
flex属性设置的时项目在分配剩余空间时所占的分数


     */
    div {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
     margin:0 auto;
      align-content: space-between;
      width: 80%;
      height: 400px;
      background-color: #ccc;
    }

    span {     
      background-color: orange;
      border: 1px solid black;
    }
    span:nth-child(1){     
      width: 100px;
    }
    span:nth-child(3){
      width: 100px;
    }
    span:nth-child(2){
      flex: 1;
    }
  </style>
</head>

<body>
  <div>
    <span>10</span>
    <span>20</span>
    <span>30</span>
  </div>
</body>

</html>

按比例分配

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 圣杯布局
flex属性设置的时项目在分配剩余空间时所占的分数


     */
    div {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
     margin:0 auto;
      align-content: space-between;
      width: 80%;
      height: 400px;
      background-color: #ccc;
    }

    span {   
      height: 100px;  
      background-color: orange;
      border: 1px solid black;
    }
    span:nth-child(1){     
      flex:2;
    }
    span:nth-child(3){
     flex: 3;
    }
    span:nth-child(2){
      flex: 1;
    }
  </style>
</head>

<body>
  <div>
    <span>10</span>
    <span>20</span>
    <span>30</span>
  </div>
</body>

</html>

1.5.2 align-self

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* align-items：设置项目再侧轴上的排列方式
    注意：侧轴不是固定的，但是默认情况下，垂直方向为侧轴
    align-items 的值如下
    flex-start：默认值，设置项目在侧轴上从头部开始，如果侧轴为y轴，则头部为顶部；如果
    侧轴为x轴，则头部为左侧
    flex-end：设置项目在侧轴上从尾部开始，如果侧轴为y轴，则尾部为容器的底部；如果
    侧轴为x轴，则尾部为右侧
    center：居中
    stretch：拉伸，将项目的高度拉伸至容器的高度，前提时项目不能设置高度
     */
    div {
      display: flex;
      flex-direction: row;
      /*设置项目在主轴上的排列方式*/
      justify-content: flex-start;
      /* 设置所有项目在侧轴上的排列方式（单行） */
      align-items:center;
      width: 700px;
      height: 400px;
      background-color: #ccc;
    }

    span {
      width: 150px;
      height: 100px;
      background-color: orange;
      border: 1px solid black;
    }
    span:nth-child(2){
      /* 单独设置此项目在侧轴上靠头部排列 */
      align-self: flex-start;
    }
    span:nth-child(1){
      /* 单独设置此项目在侧轴上靠尾部排列 */
      align-self: flex-end;
    }
  </style>
</head>

<body>
  <div>
    <span>10</span>
    <span>20</span>
    <span>30</span>
  </div>
</body>

</html>