bg.png
一.主轴方向
- Flex布局模型中，弹性盒子默认沿着水平方向布局的
- 想要垂直排列就得改变元素的排列方向
- 主轴默认是水平方向, 侧轴默认是垂直方向
- 修改主轴方向属性: flex-direction
-
flex-direction: column;
把主轴方向变成垂直方向,还是用jc控制主轴方向的对齐方式
把侧轴方向变成水平方向,还是用ai控制主轴方向的对齐方式
1.png
二.弹性盒子换行
- 默认情况下,弹性盒子沿着主轴方向排列显示,不会换行
- 弹性盒子换行显示 : flex-wrap: wrap;
- 调整行对齐方式 ：align-content
- 取值与justify-content基本相同
三.伪元素画线
1.伪元素画竖线方法
- 要用子绝父相；
- 高度给竖线的高度，宽度给0
- 选择左或右边框，边框粗细为竖线的宽度
2.伪元素画横线方法
- 要用子绝父相；
- 高度给0，宽度给横线的宽度
-
选择上或下边框，边框粗细为竖线的高度
案例:
2.png
代码:
<style>
h2 {
position: relative;
width: 300px;
height: 50px;
background-color: aqua;
text-align: center;
line-height: 50px;
margin: 50px auto;
}
h2::before,
h2::after {
position: absolute;
top: 50%;
transform: translatey(-50%);
content: '';
width: 60px;
height: 0;
border-top: 4px solid red;
}
h2::before {
left: 20px
}
h2::after {
right: 20px;
}
</style>
</head>
<body>
<h2>为你推荐</h2>
</body>
