Flex布局

主轴方向

默认开启flex布局水平排列，如何改变？

改变元素排列方向的属性：

• 改变为竖直排列flex-direction: column;

改变主轴方向后如何垂直居中？

• 确定主侧轴在哪

  • 把主轴方向变成了垂直方向，还是用jc控制主轴方向的对齐方式

  • 把侧轴方向变成了水平方向，还是用ai控制侧轴方向的对齐方式

• 选择属性

  • 主轴： align-items: center;

  • 侧轴：justify-content: center;

弹性盒子换行

设置了display：flex子级会弹性伸缩，不会主动换行，如何做到换行？

• 给谁加？

  弹性容器

• 多行排列

  flex-wrap: wrap;

  此时盒子失去弹性

• 调整多行侧轴对齐方式（与justify-content取值一致）

  align-content: space-evenly;

• 单行侧轴对齐方式

  • 只能用于fwp下

影响：

• 不贴边：弹性盒子默认拉伸状态，即便设置了高度，拉伸的高度还是保持

• 均分弹性容器高度

小兔仙个人中心

项目进行

1. 不能定死的高度

   侧轴：根据用户登记判别权限级别

   订单：由订单数量撑开，根据数量决定高度

2. 右边背景颜色

   不能定为白色，只能由内容设置白色

3. 调试vertical-align

1. 主体内容右边区域左右两个模块有公共的样式，所以放在一起写

   .centre,
   .total{
       /* 均分宽度 */
       flex: 1;
   }

    

2. 伪元素画竖线

   步骤：

   1. 要用子绝父相

   2. 高度给竖线的高度，**宽度为0

   3. 选择左或右边框，边框粗细为竖线的宽度

   .total{
       position: relative;
   }
   .total::before{
       position: absolute;
       top: 19px;
       left: 0;
       content: '';
       width: 0;
       height: 92px;
       border-left: 2px solid #f4f4f4;
   }

3. 同理，伪元素画横线

   1. 要用子绝父相；

   2. 高度给0，宽度给横线的宽度

   3. 选择上或下边框，边框粗细为竖线的高度

4. 伪元素画图标“>”

   .hd a::after{
       margin-left: 6px;
       content: '>';
       /* 英文的>太小了，换成中文就会变大 */
       font-family: 宋体;
       font-weight: 700;
   }

5. 解决外边距合并的问题

   父盒子加一个oh属性

.orders{
    /* 解决内边距塌陷问题 */
    overflow: hidden;
    
    margin: 18px 0;
    background-color: #fff;
}

1. df以后均分空间,四周都不要留白

   ​

    

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

day05

这两个样式用来干嘛的呢？

.orders .goods .txt{
    /* 上下两个样式都是为了写出省略号效果 */
    /* 溢出的时候显示省略号 */
    flex: 1;
    width: 0;
}
.orders .goods .txt h5{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

为什么a设置宽高生效了呢？

.orders li .common{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* a设置宽高生效的原因 设置了flex 也能加宽高*/
.orders li .action a:first-child{
    width: 100px;
    height: 31px;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

标签：flex,侧轴,主轴,高度,day04,content,orders
来源： https://www.cnblogs.com/Aachie/p/16110190.html