项目常见属性

最新推荐文章于 2024-11-09 17:00:03 发布

Web_front

最新推荐文章于 2024-11-09 17:00:03 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/Web_front/article/details/103716594

移动端专栏收录该内容

4 篇文章

订阅专栏

项目常见属性

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

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>

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>