flex 默认值: flex: 0 1 auto ;//flex-grow flex-shrink flex-basis
1.Flex模型
flex-container | flex-item | main axis | cross axis
Flex模型.jpg
2.flex-container-水平显示/行内样式
js文件
<div className="container">
<div className="item item-1"><span>1</span></div>
<div className="item item-2"><span>2</span></div>
<div className="item item-3"><span>3</span></div>
<div className="item item-4"><span>4</span></div>
<div className="item item-5"><span>5 </span></div>
</div>
less文件
#body {
padding: 0;
margin: 0;
}
.container {
background-color: #6435c9;
padding: 10px;
}
.item {
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
background-color: #ffffff;
color: #cccccc;
padding: 30px;
display: block;
text-align: center;
}
.item span {
font-size: 50px;
}
///Flex部分
.container {
//display: flex;//水平显示 block
display: inline-flex;//行内样式-span
}
效果图
效果图.jpg
3.flex-direction-控制项目的排列顺序在主轴(X)的方向
控制项目的排列顺序在主轴(X)的一个方向main axis
row 水平方向
colunm 竖直方向
less文件
///Flex部分
.container {
display: flex;//水平显示 block
flex-direction: row;//水平排列
flex-direction: row-reverse;//水平倒置排列（从右往左）
flex-direction: column;//竖直排列
flex-direction: column-reverse;//竖直倒置排列(从下往上)
}
效果图
flex-direction.jpg
4.flex-wrap-控制项目是否在多行显示
///Flex部分
.container {
display: flex;//水平显示 block
flex-wrap: nowrap;//不换行
flex-wrap: wrap;//换行(根据容器的宽度自适应显示)
flex-wrap: wrap-reverse;//换行倒置(根据容器的宽度自适应显示)
}
效果图
flex-wrap.jpg
5.flex-flow-flex-direction属性和flex-wrap属性的简写
flex-direction属性和flex-wrap属性的简写形式,默认flex-flow:row nowrap;
///Flex部分
.container {
display: flex;//水平显示 block
flex-flow: row-reverse wrap;
}
效果图
flex-flow.jpg
6.justify-content-调整项目在水平方向的位置和间隔
///Flex部分
.container {
display: flex;//水平显示 block
justify-content: flex-start;//默认值
justify-content: flex-end;//靠右排列，不倒置
justify-content: center;//居中显示
justify-content: space-between;//添加间隔(第一个项目和最后一个项目之间不会有间隔)
justify-content: space-around;//在项目的周围左边和右边添加一些间隔
}
效果图
justify-content.jpg
7.align-items-调整项目在垂直方向的位置
///Flex部分
.container {
display: flex;//水平显示 block
justify-content: space-around;//在项目的周围左边和右边添加一些间隔
height: 300px;
align-items: stretch;//默认值
align-items: flex-start;//容器垂直方向的顶部
align-items: flex-end;//容器垂直方向的底部
align-items: center;//居中
align-items: baseline;//基线对齐
}
.item-1 {
padding-top: 50px;
}
.item-3 {
padding-top: 70px;
}
效果图
align-items.jpg
8.align-content-多行显示时：调整容器在垂直方向的对其方式
///Flex部分
.container {
display: flex;//水平显示 block
flex-wrap: wrap;
height: 300px;
align-content: flex-start;
align-content: flex-end;
align-content: space-between;//上下中间内容添加间隔
align-content: space-around;//上下添加间隔
}
效果图
align-content.jpg
9.order-改变项目在flex容器中的顺序
less文件
///Flex部分
.container {
display: flex;//水平显示 block
height: 300px;
justify-content: space-around;
align-items: flex-start;
}
.item-1 {
order: 1;//把这个项目排列到最后
}
.item-5 {
order: -1;//把5排列到最前面
}
效果图
order.jpg
10.flex-item-利用容器剩下水平方向的位置
flex-grow-利用容器剩下水平方向的位置
///Flex部分
.container {
display: flex;//水平显示 block
height: 300px;
align-items: flex-start;
}
.item {
flex-grow: 1;//设置宽度相等,自适应屏幕
}
.item-3 {
flex-grow: 3;//单独设置宽度比其他大,类似权重
}
效果图
flex-grow.jpg
flex-basis 设置每个项目的宽度,会随宽度的缩小而缩小
flex-shrink: 0;//设置不随宽度的缩小而缩小
///Flex部分
.container {
display: flex;//水平显示 block
height: 300px;
align-items: flex-start;
}
.item {
flex-basis: auto;//默认值
flex-basis: 600px;//设置每个项目的宽度,会随宽度的缩小而缩小\
}
.item-3 {
flex-shrink: 0;//设置不随宽度的缩小而缩小
flex-shrink: 3;//设置值越大，宽度越小
}
效果图
flex-shrink.jpg
11.align-self-单独设置某一个项目的对齐方式
///Flex部分
.container {
display: flex;//水平显示 block
height: 300px;
justify-content: space-around;
align-items: flex-start;
}
.item-1 {
align-self: auto;//默认值
align-self: flex-end;//靠最底部显示
}
.item-2 {
align-self: center;//居中显示
}
.item-3 {
align-self: stretch;
}
.item-4 {
align-self: center;
}
.item-5 {
align-self: flex-end;
}
效果图：
align-self.jpg
Flex 案例之推广大使首页效果图
Flex布局案例.gif
