原创:牛津小马哥web前端工程师陈小妹妹。
在“ Flexbox布局”模块之前,有四种布局模式:
这些尽管布局可以暂时性满足我们的要求,可是代码写起来不够方便简洁,于是有了Flex布局。flex,顾名思义,可收缩的布局,它是一种灵活的盒子布局模块,可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。
让我们从简单示例开始:
这是本例的代码,接下来的贴出的局部代码将基于该模板代码的改动。
The CSS Flexbox Layout
1
2
3
通过将display属性设置为flex,flex容器变得灵活
.flex-container {
display: flex;
}
flex-direction属性定义容器要在哪个方向上排列展现flex的子项,决定了主轴的方向。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
代码示例:
.flex-container {
display: flex;
flex-direction:row;
}
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
示例代码:
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: rgb(153,93,181);
}
flex-flow是用于同时设置flex-direction和flex-wrap属性的简写属性
示例代码:
.flex-container {
display: flex;
flex-flow: row wrap;
background-color: rgb(153,93,181);
定义了沿主轴的对齐方式。 当一行中的所有伸缩项目已达到最大大小时,它可以帮助分配剩余的剩余可用空间。 当项目溢出线时,它还对项目的对齐方式施加一些控制。
flex-start(默认):将项目打包到flex-direction的开头。
flex-end:项目在flex-direction的末端排列。
center:项目沿居中
space-between:同一行中的flex项目之间都有均匀分布的空间。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。
space-around:项目在行中均匀分布,项目之间和边缘具有一定的空间。请注意,从视觉上看,空间是不相等的,第一项相对于容器边缘有一个单位的空间,但下一项之间有两个单位的空间。简单来说,space-around展现flex项目,让每个项目前中后都有一定空间的留白。
概括性的说,相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
space-evenly:任意两个项目之间的间隔(以及边缘之间的空间)相等。
示例代码:
.flex-container {
display: flex;
justify-content: center;
flex-wrap:wrap;
background-color: rgb(153,93,181);
}
示例代码:
.flex-container {
display: flex;
align-items:center;
flex-wrap:nowrap;
background-color: rgb(153,93,181);
height:300px;
}
示例代码:
.flex-container {
display: flex;
flex-wrap:wrap;
align-content:space-between;
background-color: rgb(153,93,181);
height:300px;
}
巧用两个属性,达到水平垂直居中效果
关键代码如下:
.flex-container {
display: flex;
flex-wrap:wrap;
align-content:center;
justify-content:center;
background-color: rgb(153,93,181);
height:300px;
}
许多同学会疑惑,这align-items和align-content的功能很相似,它们有什么区别呢?
align-items是针对单行中的项目。对于主轴上的单行元素,align-items将使这些项目彼此对齐
而align-content属性适用于多行的flex容器,并且当交叉轴上有多余空间使flex容器内的flex线对齐。
前面的实例中,由于我们设置了margin:10px,导致align-items和align-content的区别不明显
现在,我们把css修改如下:
接下来,将align-content:center;修改为align-items:center;
"align-items:center;"把每个flex行看作是一个整体排列,行与行之间有间隔地向中间对齐。
在使用这两个属性的时候,如果我们的目标是把多行的flex项目看成是一个大整体来展示的话,那么我们选择用align-content;如果是针对单行的flex项目,那么选择用align-items进行排列。
本篇关于flex容器的属性讲解就是这些。
感谢阅读~