项目常见属性

最新推荐文章于 2020-11-05 20:57:47 发布

Web_front

最新推荐文章于 2020-11-05 20:57:47 发布

阅读量1k

点赞数 2

分类专栏：移动端

本文链接：https://blog.csdn.net/Web_front/article/details/103716594

版权

移动端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

项目常见属性

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>

Web_front

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
项目常见属性

项目常见属性flex 项目占的份数align-self 控制子项自己在侧轴的排列方式，前面的align-items 和 align-content是对所有子项应用相同的排列方式，而这个属性是对单个子项应用个性化的排列方式order 定义项目的排列顺序（前后顺序）1. flex定义子项目分配剩余空间，用 flex 属性表示占多少分分配的容器的剩余空间会增加到元素的宽度上项目...
复制链接

扫一扫