快来快来,这个博主终于更博啦~
一、Flex布局
- 原理:给父盒子添加flex属性,来控制子盒子的位置和排列方式
- 特点:
a.一旦给父元素添加了display:flex;这个属性后子元素将不区分行内元素和块元素,此时的子元素就能够自定义宽度和高度
b.任何元素均可用flex布局,可以理解为父盒子对子元素“一视同仁”
c.不需要清除浮动,因此此时float、clear、vertical-align等属性失效
二、Flex属性
1.父项常见属性
先给大家看一下我整理的思维导图,大致常用属性:
2.子项常见属性
先给大家看一下我整理的思维导图,大致常用属性:
3.Flex布局展示
- flex-direction:row(默认值)水平方向起点在左端 ;
row-reverse水平方向起点在右端 ;
水平方向:
-
flex-direction:column 垂直方向 从上往下 ;
column-reverse垂直方向 从下往上。
垂直方向:
-
flex-wrap:nowrap(不换行)
- flex-wrap:wrap(换行,第一行在上方)
- flex-wrap:wrap-reverse(换行,第一行在下方)
默认情况,所有flex项目会排在一条线上,不会自动换行
- flex-flow默认值:row nowrap
.box{
flex-flow:<flex-direction><flex-wrap>;
}
4.移动布局中常见的布局方式
- 小米官网中的布局,如下:
这种布局我们就可以利用flex来完成
代码如下:
/* li的父盒子是ul!! */
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
ul li {
width: 150px;
height: 100px;
background-color: skyblue;
margin: 5px;
}
代码的实现效果,如下:
- 导航栏中常用布局效果,如下:
这种布局我们就可以利用flex来完成
代码如下:
.local-nav {
display: flex;
height: 64px;
background-color: #fff;
margin: 3px 4px;
border-radius: 8px;
}
.local-nav li {
flex: 1;
/* 盒子里面的li平均分布 */
}
.local-nav a {
display: flex;
flex-direction: column;
/* 侧轴居中对齐 因为是单行 */
align-items: center;
font-size: 12px;
}
- 头部导航栏中常用布局效果,如下:
这种布局我们就可以利用flex来完成
代码如下:
.box {
display: flex;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
/* 想要左右固定,中间随页面的改变而改变:
左右两侧的宽度固定 中间的给百分数 */
.left {
width: 200px;
background-color: pink;
}
.center {
width: 60%;
background-color: blue
}
.right {
width: 200px;
background-color: pink;
}
总结
快国庆啦~博主这篇更新完就可以啦!!!提前祝大家国庆快乐哦!