Flex 布局
Flex布局,也叫做弹性伸缩布局,这种布局方式,是为了兼容移动端的多屏幕而生的,很适合用于开发 响应式 的网站。
要理解Flex布局并不难,分为空间、方向、位置三点。
空间
代码
body {
display: flex;
}
#header {
background: #FF6A6A;
flex-grow:1;
}
#main {
background: #C0FF3E;
flex-grow:3;
}
#footer {
background: #00BFFF;
flex-grow:1;
}
display: flex; 把容器设置成一个Flex的盒子。
flex-grow 空间的划分,我们这里等比例分成了1、3、1三份。
效果
头部
内容
尾部
方向
根据空间默认规划出来的元素排版,是横向的,我们可以修改成纵向。
body {
display: flex;
flex-direction: column;
}
#header {
background: #FF6A6A;
flex-grow:1;
}
#main {
background: #C0FF3E;
flex-grow:3;
}
#footer {
background: #00BFFF;
flex-grow:1;
}
我们还可以反转顺序,把元素的顺序改成尾部、内容、头部。分别对应row-reverse和column-reverse。
效果
头部
内容
尾部
位置
位置主要是元素的一些对齐方式。
body {
display: flex;
flex-direction: column;
}
#header {
background: #FF6A6A;
flex-grow:1;
display: flex;
justify-content: center;
}
#main {
background: #C0FF3E;
flex-grow:3;
display: flex;
align-items: center;
}
#footer{
background: #00BFFF;
flex-grow:1;
display: flex;
justify-content: center; align-items: center;
}
Flex盒子里面,还可以在嵌套Flex盒子。配合空间、方向、位置的转换,就构成了我们整个复杂的页面。
效果
水平居中
垂直居中
水平居中 & 垂直居中
常用属性
flex-start从头开始。
flex-end从尾开始。
flex-center居中。
到这里,我们的CSS也结束了,学会了喵,下一篇是JS。