Flex布局详解

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文件

   
1
   
2
   
3
   
4
   
5 

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