bg.png
一.主軸方向
- Flex布局模型中，彈性盒子默認(rèn)沿著水平方向布局的
- 想要垂直排列就得改變元素的排列方向
- 主軸默認(rèn)是水平方向, 側(cè)軸默認(rèn)是垂直方向
- 修改主軸方向?qū)傩? flex-direction
-
flex-direction: column;
把主軸方向變成垂直方向,還是用jc控制主軸方向的對齊方式
把側(cè)軸方向變成水平方向,還是用ai控制主軸方向的對齊方式
1.png
二.彈性盒子換行
- 默認(rèn)情況下,彈性盒子沿著主軸方向排列顯示,不會換行
- 彈性盒子換行顯示 : flex-wrap: wrap;
- 調(diào)整行對齊方式 ：align-content
- 取值與justify-content基本相同
三.偽元素畫線
1.偽元素畫豎線方法
- 要用子絕父相；
- 高度給豎線的高度，寬度給0
- 選擇左或右邊框践樱，邊框粗細(xì)為豎線的寬度
2.偽元素畫橫線方法
- 要用子絕父相拷邢；
- 高度給0瞭稼，寬度給橫線的寬度
-
選擇上或下邊框环肘，邊框粗細(xì)為豎線的高度
案例:
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>
