首页 > 其他分享> 文章详细

day04 主轴换

2022-04-06 23:33:41 阅读：197 来源： 互联网

标签：flex 侧轴主轴高度 day04 content orders

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下

影响：

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

小兔仙个人中心

项目进行

不能定死的高度

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

订单：由订单数量撑开，根据数量决定高度
右边背景颜色

不能定为白色，只能由内容设置白色
调试vertical-align

主体内容右边区域左右两个模块有公共的样式，所以放在一起写
```
.centre,
.total{
    /* 均分宽度 */
    flex: 1;
}
```

伪元素画竖线

步骤：

要用子绝父相
高度给竖线的高度，**宽度为0
选择左或右边框，边框粗细为竖线的宽度

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

同理，伪元素画横线
1. 要用子绝父相；
2. 高度给0，宽度给横线的宽度
3. 选择上或下边框，边框粗细为竖线的高度

伪元素画图标“>”

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

解决外边距合并的问题

父盒子加一个oh属性

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

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