1、基本概念
采用flex布局的元素成为flex容器，容器包括水平的主轴(main axis)和垂直的交叉轴(cross axis)，主轴包括开始位置(main start)和结束位置(main end),交叉轴也包括开始位置(cross start)和结束位置(cross end)。项目默认沿水平方向排序。
2、容器属性
-
flex-direction：决定主轴的方向
- row(默认值)：沿水平方向，起点在左边
- row-reverse：沿水平方向，起点在右边
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
-
flex-wrap：如果一行容不下，将会换行
nowrap(默认)：不换行
wrap：换行，第一行在上方
-
wrap-reverse：换行，第一行在下方
此时容易出现的问题是换行后下一行并不能紧挨着上一行，而是所有的行数平分整个高度，可以和align-content配合使用
flex-flow：flex-direction和flex-wrap的简写形式，默认值为row nowrap
-
justify-content：主轴的对齐方式
- flex-start|flex-end :水平左/右
- center：水平居中
- space-between：水平两端对齐
- space-around：相当于margin属性，内部元素平分水平宽度
-
align-items：交叉轴的对齐方式
- flex-start | flex-end ：垂直方向的上下
- center 垂直居中
- baseline ：以垂直方向第一行文字的基线对齐
- stretch(默认值):如果项目未设置高度或设为auto，将占满整个容器的高度
-
align-content:多跟轴线的对齐方式
- flex-start | flex-end ：与交叉轴的起点/终点对齐
- center ：与交叉轴的中间对齐
- space-between ：与交叉轴的两端对齐
- space-around ：平分整个交叉轴(内部的每一个元素都包括上下边距)
- stretch ：占满整个交叉轴
项目中属性
- order<integer>：按照int进行排列
- flex-grow：放大比例
- flex-shrink：缩小比例
- flex-basis：可以设置大小，默认为auto
- flex：上面3个属性的简写
- align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
实例说明
CSS代码
.box1 {
display: flex;
justify-content: center;
height: 120px;
width: 100%;
background: gainsboro;
}
.box2 {
display: flex;
justify-content: space-between;
height: 120px;
width: 100%;
background: gainsboro;
}
.container1 {
display: flex;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.content1 {
background: #67cf22;
height: 40px;
width: 40px;
border-radius: 20px;
}
.container2 {
display: flex;
/*控制显示方向*/
flex-direction: column;
height: 120px;
width: 120px;
background: dimgrey;
}
.container3 {
display: flex;
/*控制换个换行*/
flex-wrap: wrap;
/*多行的对齐方式*/
align-content: flex-start;
height: 120px;
width: 120px;
background: dimgrey;
margin-left: 10px;
margin-right: 10px;
}
.container4 {
display: flex;
/*设置内容的位置*/
justify-content: center;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container5 {
display: flex;
/*设置内容的位置*/
justify-content: flex-end;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container6 {
display: flex;
align-items: center;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container7 {
display: flex;
justify-content: space-between;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container8 {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container9 {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container10 {
display: flex;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.content10 {
background: #67cf22;
height: 40px;
width: 40px;
border-radius: 20px;
}
.content10:nth-child(2){
align-self: center;
}
.container11 {
display: flex;
justify-content: space-between;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.content11 {
background: #67cf22;
height: 40px;
width: 40px;
border-radius: 20px;
}
.content11:nth-child(2){
align-self: flex-end;
}
.container12 {
display: flex;
justify-content: space-between;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.content12 {
background: #67cf22;
height: 40px;
width: 40px;
border-radius: 20px;
}
.content12:nth-child(2){
align-self: center;
}
.content12:nth-child(3){
align-self: flex-end;
}
.container13 {
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: flex-end;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
HTML代码
<div class="box1">
<div class="container1">
<div class="content1"></div>
</div>
<div class="container2">
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container3">
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container4">
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container5">
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container6">
<div class="content1"></div>
</div>
<div class="container7">
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container8">
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container9">
<div class="content1"></div>
<div class="content1"></div>
</div>
</div>
<div class="box2" style="margin-top: 10px;">
<div class="container10">
<div class="content10"></div>
<div class="content10"></div>
</div>
<div class="container11" >
<div class="content11"></div>
<div class="content11"></div>
</div>
<div class="container12" >
<div class="content12"></div>
<div class="content12"></div>
<div class="content12"></div>
</div>
<div class="container13" >
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
</div>
</div>
效果图
效果图
