移动端入门知识点03—弹性盒子项目属性

三七yiii

已于 2022-03-27 11:01:31 修改

阅读量584

点赞数 1

分类专栏：前端 HTML5 文章标签： css html 前端 css3 html5

于 2022-03-24 22:56:33 首次发布

本文链接：https://blog.csdn.net/m0_65208646/article/details/123723635

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML5

9 篇文章 0 订阅

订阅专栏

本文详细解读了Flex布局中的关键项目属性，包括align-self对齐方式、order排列顺序、flex-grow与shrink缩放比例以及flex-basis基础尺寸。通过实例演示了如何在CSS中灵活运用这些属性来控制容器内项目的布局。

摘要由CSDN通过智能技术生成

一、项目

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

二、项目属性

1、align-self 单个项目在交叉轴的对齐方式

该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

值：

值	解释
auto	默认，继承父容器align-items值;
stretch	当项目未设置高度或为auto时，会占满整个父容器
center	居中对齐
flex-start	与交叉轴的起点对齐居上
flex-end	交叉轴的终点对齐，居下对齐
baseline	与第一个项目的第一行文字基线对齐

    .box .item:nth-of-type(2) {
      background-color: greenyellow;
      /* align-self 定义单个项目在交叉轴的对齐方式 */
      align-self: auto; /* 默认，继承父容器align-items值; */
     
      align-self: flex-start;  /* 居上对齐 */

      /* align-self: end;这样写也可以起作用 */
      
      align-self: flex-end; /* 居下对齐 */
       
      align-self: center; /* 垂直方向居中 */
      
    }

2、order 项目排列方式

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以为负值。

  <style>
   .box {
      /* 容器*/
      display: flex;
      width: 500px;
      height: 500px;
    }
    .box .item {
      height: 100px;
      width: 100px;
    }
    .box .item:nth-of-type(1) {
      background-color: pink;
      order: 1; /* 在当前代码中表示排到最后 */
    }
    .box .item:nth-of-type(2) {
      background-color: greenyellow;  
    }
    .box .item:nth-of-type(3) {
      /* order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 */
      order: -1; /* 项目的排列顺序 */
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>

  </div>

3、flex-grow 项目放大比例

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

 <style>
    .box {
      /* 容器*/
      display: flex;
      width: 500px;
      height: 500px;
      align-items: center;
      background-color: bisque;
}
    .box .item {
      height: 100px;
      width: 100px;
      /* flex-grow: 1; */
      /* 每个项目均分剩余部分 */     
    }
    .box .item:nth-of-type(1) {
      background-color: pink;
      flex-grow: 0;
      /* 所占剩余空间按数值比例划分,数值一样则均分 */
    }
    .box .item:nth-of-type(2) {
      flex-grow: 2; 
      background-color: greenyellow;      
    }
    .box .item:nth-of-type(3) {
      flex-grow: 3;
      /* 该代码表示剩余部分将分成5份,盒3将增大剩余部分的五分之三,盒2增大五分之二 */
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
  </div>
</body>

4、flex-shrink 项目缩小比例

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

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

.box .item:nth-of-type(2) {
      background-color: greenyellow;
      flex-shrink: 0;
      /* 空间不足时不缩小 */

    }

5、flex-basis 项目实际空间大小

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

6、简写

flex:flex-grow 【flex-shrik】【flex-basis值】；

【】代表非必须，可选

 .box .item:nth-of-type(3) {
      background-color: yellow;
      flex:0 1 auto ;
      /*默认值*/
    }

快捷值：

flex:auto

表示 flex: 1 1 auto 父容器空间有剩余，等比例放大，空间不足，等比例缩小

flex:none

表示flex:0 0 auto 父容器空间有剩余，不放大，空间不足，不缩小

 flex:none;
 flex:auto;

三七yiii

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端入门知识点03—弹性盒子项目属性

一、项目采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。二、项目属性1、align-self 单个项目在交叉轴的对齐方式该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。值：值解释 auto 默认，继承父容器align-items值; stretch 当项目未设置高度或为auto时，.
复制链接

扫一扫

专栏目录