前言
“把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添了烦恼。”今天我们来了解一下CSS中的flex弹性布局,看看它都有哪些厉害的操作。
为什么使用flex
使用flex布局能够有效提高页面的灵活性,满足我们在网页编写时的需要。
使用方法
通过设置 display 的属性值为 flex 或 inline-flex。
- CSS示例
body {
margin: 0;
padding: 0;
text-align: center;
}
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
display: flex;
border: gray 1px solid;
}
.flex-box{
width: 100px;
height: 100px;
background: #00D3E9;
margin: 20px;
}
- HTML示例
<div class="container">
<div class="flex-box"></div>
<div class="flex-box"></div>
<div class="flex-box"></div>
</div>
-
示例图
图1
flex-direction
作用:flex-direction 属性指定了弹性子元素在父容器中的位置。
由于接下来的示例只改变以上的container属性值,所以只给出父级容器的CSS代码和效果图。
- flex-direction: column;/* 纵向排列*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
flex-direction: column; /* 纵向排列*/
}
图2
- flex-direction: row;/* 横向排列,水平方向*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
flex-direction: row;/* 横向排列,水平方向*/
}
图3
- flex-direction: row-reverse;/* 水平线上的反向排列*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
flex-direction: row-reverse; /* 水平线上的反向排列*/
}
图4
- flex-direction: column-reverse;/* 纵向上的反向排列*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
flex-direction: column-reverse; /* 纵向上的反向排列*/
}
图5
justify-content
作用:内容对齐属性应用在弹性容器上的方式。
- justify-content: center;/* 居中 */
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
justify-content: center;/* 居中 */
}
图6
- justify-content: left;/* 居左 ,与flex-start相同效果*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
justify-content: left;/* 居左 */
}
图7
- justify-content: end;/* 居后,亦可以看作right 与flex-end相同效果*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
justify-content: end;/* 居后*/
}
图8
- justify-content: space-between;/* 两者之间,*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
justify-content: space-between;/* 两者之间*/
}
图9
- justify-content:space-around/* 环绕模式*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
justify-content:space-around/* 环绕模式*/
}
图10
align-items
作用:设置弹性元素在纵轴(Y轴)上的对齐方式。
- align-items: flex-start;/* 居上*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
align-items: flex-start;/* 居上*/
}
![图13](https://img.haomeiwen.com/i6332806/863dbcb4483336e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- align-items: center;/* 居中*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
align-items: center;/* 居中*/
}
图11
- align-items: flex-end;/* 居底部*/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
align-items: flex-end;/* 居底部*/
}
图12
flex-wrap
作用:指定弹性盒子里的元素换行方式。
- flex-wrap: nowrap;/不换行/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
flex-wrap: nowrap;/*不换行*/
}
图13
- flex-wrap: wrap;/换行/
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
flex-wrap: wrap;/*换行*/
}
图14
- flex-wrap: wrap-reverse;
.container {
position: relative;
padding: 0;
width: 750px;
height: 400px;
margin: 100px auto;
border: gray 1px solid;
display: flex;
flex-wrap: wrap-reverse;
/* -webkit-flex-wrap: wrap-reverse; */
}
图15
总结
flex-wrap: wrap-reverse;我没有做解释,因为我还不太确定它的属性值。明天接着更,把它补上。
(本文适合初学者,如果你是大佬级别的人物,我也欢迎指教!)
网友评论