小黑子的flex布局复习
flex布局
1. flex基础
-
flex布局含义:
-flex布局,也被称之为弹性盒子布局,是CSS3里面新增的一种布局
方式,通过使用flex布局,我们可以让布局更加便捷高效. -
如何触发弹性盒子:
-给父元素添加display属性,并且将取值设置成:flex -
触发弹性盒子有哪些特点?
-
子元素默认横向显示
-
子元素会默认变成块级元素,能设置宽度高度
-
如果只有一个子元素的话,则给子元素添加margin:auto的时候
会让子元素垂直水平居中
-
2. Flex布局基础概念
- flex容器:采用flex布局的元素的父元素;
- flex项目:采用flex布局容器里面的子元素;
- 主轴:触发弹性盒子后,项目的排列方向;
- 横轴(水平轴):水平方向轴线;
- 纵轴(垂直轴):垂直方向轴线;
- 侧轴(交叉轴):触发弹性盒子后,与主轴对立的方向。
- 注意:触发弹性盒子之后,项目默认沿主轴排列。
3. display:flex 弹性盒子
影响:
1.子元素默认横向排列
2.行内元素,变成了块级元素
3.只有一个元素的时候, margin:auto 自动居中
4.与浮动没有任何关系
4. flex-direction 修改主轴方向
修改主轴方向
flex-direction:row 水平方向排列
flex-direction:row-reverse 水平方向反向排列
flex-direction:column 竖直方向排列
flex-direction:column-reverse 竖直方向反向排列
5. justify-content 调整主轴对齐方式
调整主轴对齐方向
- justify-content:flex-start 主轴默认对齐
- justify-content:flex-end 主轴对齐后面(项目之间无间距)
- justify-content:center 主轴中间对齐(项目之间无间距)
- justify-content:space- between 主轴两端对齐(项目之间无间距)
- justify-content:space-around 主轴每个元素距离环绕,项目与项目之间距离是首尾项目与容器之间距离的2倍
- justify-content:space-evenly 主轴的平分
6. align-items 调整侧轴对齐
调整主轴对齐方向
align-items:flex-start 侧轴默认对齐
align-items:flex-end 侧轴对齐后面
align-items:center 侧轴中间对齐
align-items:space- between 侧轴两端对齐
align-items:space-around 侧轴距离环绕
align-items:baseline 侧周的基线位置显示,效果与开始位
置一致,实际开发的时候不会使用该属性值
align-items:stretch 默认拉伸项目高度充满容器,前提是项目不需要设置高度
7. flex-wrap 折行属性
调整弹性盒子中的子盒子过多时,折行
flex-wrap:nowrap 不折行,默认就是存在挤压的效果
flex-wrap:wrap 折行显示;
8. align-content 控制折行后的行间距
折行后会存在上下盒子间距的问题,align-content来调节属性:
- align-content:flex-start 上下默认对齐
- align-content:flex-end 上下对齐后面
- align-content:center 上下中间对齐
- align-content:space- between 上下两端对齐
- align-content:space-around 上下距离环绕
- align-content:space-evenly 上下间距平分
9. align-self 单独整侧轴对其方式
- align-self:flex-start 项目位于侧轴的开始位置显示
- align-self:flex-end 项目位于侧轴的结束位置显示
- align-self:center 项目位于侧轴的居中位置显示
- align-self:baseline 项目位于侧轴的基线位置对其,但是开发的时候几乎不会使用
- align-self:strech 侧轴上面的拉伸效果
10. orde 调整顺序
给每个元素添加时用到结构伪类
属性:order ======调整显示顺序的:项目的显示顺序
取值可以为正数
可以为负数
取值越大越靠后面
取值越小越靠前面
order : auto ===0
11. flex : 1 占剩余宽度或剩余高度的所有
属性:flex : 1;
作用:设置占剩余宽度,剩余高度的所有: 前提:如果主轴在横向则实现占剩余宽度所有;
主轴在纵向的话,则实现占剩余高度的所有 如果所有的项目都使用了flex:1;则实现的效果是均分的情况
- 主轴在横向的时候
如果项目不设置高度的话,默认高度是拉伸的,
项目添加flex:1实现的是占剩余宽度的所有
- 主轴在纵向的时候
如果项目不设置宽度的话,默认宽度是拉伸的,
项目添加flex:1实现的是占剩余高度的所有
12. flex 复合属性
- flex属性是一个复合属性
是由: flex-grow、flex-shrink、flex-basis三个属性的缩写。 flex-grow
:定义项目的的放大比例;
默认为0,即即使存在剩余空间,也不会放大;
所有项目的flex-grow为1:等分剩余空间(自动放大占位);
flex-grow为n的项目,占据的空间(放大的比例)是flex-grow为1的n倍。- flex-basis:定义在分配多余空间之前,项目占据的主轴空间(main size)
浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值,默认值为auto flex-shrink
:定义项目的缩小比例
取值为0时,不挤压不折行
取值为1时,默认效果
13. margin:0 auto 基本原理
margin:0 auto 基本原理相当于
display: flex;
justify-content:center;
align-items:center
14. 自适应导航案例
<style>
*{
margin: 0;
padding: 0;
}
.layout{
height: 44px;
background-color:#d92b34;
}
nav{
width:1004px;
height: 44px;
background-color: #c8411f;
margin: 0 auto;
display: flex;
}
nav>div{
flex: 1;
text-align: center;
line-height: 44px;
color: white;
}
nav>div:hover{
background-color: orange;
}
</style>
<div class="layout">
<nav>
<div>van</div>
<div>van</div>
<div>van</div>
<div>van</div>
<div>van</div>
<div>van</div>
<div>van</div>
<div>van</div>
<div>van</div>
<div>van</div>
</nav>
</div>
15. pc 主体布局
<style>
*{
margin: 0;
padding: 0;
}
.bigbox{
width: 1202px;
height: 960px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-content:space-between;
}
.bigbox>div{
width:576px;
height:150px;
border: 1px solid gray;
display:flex;
}
.bigbox>div>div>p:nth-child(1){
font-size: 18px;
margin-top: 20px;
color: #605f5f;
}
.bigbox>div>div>p:nth-child(2){
font-size: 12px;
line-height: 42px;
color: #abadaf;
}
.bigbox>div>div>p:nth-child(3){
font-size: 14px;
color: #959595;
}
</style>
<div class="bigbox">
<div>
<img src="./img/1.jpg"/>
<div>
<p>麻瓜的教育</p>
<p>2022-22-22</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
<div>
<img src="./img/1.jpg"/>
<div>
<p>麻瓜的教育</p>
<p>2022-22-22</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
<div>
<img src="./img/1.jpg"/>
<div>
<p>麻瓜的教育</p>
<p>2022-22-22</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
<div>
<img src="./img/1.jpg"/>
<div>
<p>麻瓜的教育</p>
<p>2022-22-22</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
<div>
<img src="./img/1.jpg"/>
<div>
<p>麻瓜的教育</p>
<p>2022-22-22</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
<div>
<img src="./img/1.jpg"/>
<div>
<p>麻瓜的教育</p>
<p>2022-22-22</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
<div>
<img src="./img/1.jpg"/>
<div>
<p>麻瓜的教育</p>
<p>2022-22-22</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
<div>
<img src="./img/1.jpg"/>
<div>
<p>麻瓜的教育</p>
<p>2022-22-22</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
<div>
<img src="./img/1.jpg"/>
<div>
<p>麻瓜的教育</p>
<p>2022-22-22</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
<div>
<img src="./img/1.jpg"/>
<div>
<p>麻瓜的教育</p>
<p>2022-22-22</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
</div>