display的flex和block（display:flex属性）

我眼中的弹性盒子

display: flex意思是弹性布局                 ，弹性布局简直不要太好用 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，今天就来和大家具体讲讲它的属性和用法吧                 。

flex的属性（以下五个属性语法都是加在父元素身上的 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。）

一 1. flex-direction: row; 布局的排列方向 （主轴排列方向）

row 默认值
















，显示为行
















。方向为当前文档水平流方向
  
  
  
  
  
  
  
  
 ，默认情况下是从左往右
  
  
  
  
  
  
  
  
 。

row-reverse 显示为行 
  
  
  
  
  
  
  
  。但方向和row属性值是反的 
  
  
  
  
  
  
  
  ，在水平方向上为从右往左 


 


 


 


 


 


 


 


 

。

column 显示为列 方向为在垂直方向上从上到下

column-reverse 显示为列
 
 
 
 
 
 
 
 
。但方向和column属性值是反的

2. flex-wrap : nowrap; 是否进行换行处理  
   
   
   
   
   
   
   
   。此语法是加在父元素身上的 

 

 

 

 

 

 

 

 
。

nowrap; 默认值 


 


 


 


 


 


 


 


 

，不换行处理

wrap; 换行处理

wrap-reverse; 反向换行

flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的
 
 
 
 
 
 
 
 
，顺序一定不能乱)

 

 

 

 

 

 

 

 

。

3. justify-content ; 属性决定了主轴方向上子项的对齐和分布方式                 。

flex-start ： 子项都去起始位置对齐 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。

flex-end ： 子项都去结束位置对齐

















。

center ： 子项都去中心位置对齐                         。

space-between : 表现为两端对齐 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。between是中间的意思  
   
   
   
   
   
   
   
   ，意思是多余的空白间距只在元素中间区域分配

























。

space-around : around是环绕的意思 

 

 

 

 

 

 

 

 
，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距

 

 

 

 

 

 

 

 

，最终视觉上边缘两侧的空白只

有中间空白宽度一半                 。

space-evenly : evenly是匀称  
  
  
  
  
  
  
  
  、平等的意思 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。也就是视觉上                 ，每个flex子项两侧空白间距完全相等
















。

4.align-items : 每一行中的子元素上下对齐方式
  
  
  
  
  
  
  
  
 。

flex-start; 顶部对齐

center; 居中对齐

flex-end; 底部对齐

5.align-content : 跟justify-content相反的操作 
  
  
  
  
  
  
  
  。侧轴的对齐方式 


 


 


 


 


 


 


 


 

。(最少需要两行才能看出效果 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，因为他是多行的一个上下对齐方式)

默认：多行下

















，有几行就会把容器划分为几部分                         ，默认就是stretch拉伸的
 
 
 
 
 
 
 
 
。

值跟justify-content取值是相同的  
   
   
   
   
   
   
   
   。

## flex的 注意事项

注：1.默认情况下 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，在弹性盒子中的子元素的左右排列的 

 

 

 

 

 

 

 

 
。

2. 水平是主轴的时候：默认情况下

























，当宽高不写的时候                 ，宽度由内容决定 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，高度由父容器决定

 

 

 

 

 

 

 

 

。

3. 垂直是主轴的时候：默认情况下
















，当宽高不写的时候
  
  
  
  
  
  
  
  
 ，宽度由父容器决定 
  
  
  
  
  
  
  
  ，高度由内容决定                 。

4. 当子项的总宽度大于父容器的时候 


 


 


 


 


 


 


 


 

，会自动收缩的（弹性的优先级是大于自身固定大小的）

5.当子项的内容已经达到了父容器最小宽高的时候
 
 
 
 
 
 
 
 
，就会出现溢出的现象 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。

6.弹性布局中用的频率比较多的语法：

display : flex;

flex-direction;

justify-content;

align-items;