flex弹性布局

1 什么是弹性布局？

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。
任何容器都可以指定为flex布局。

.box{
	  display:flex;
}

需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

2 容器的基本属性

第一部分写在父容器上的；

1 flex-direction:

	flex-direction:row（默认值 ）
	布局的排列方向：主轴的排列方向，以主轴水平方向排列，起点位置在左端
	
    flex-row-reverse:
    显示为行，但是与row的属性值方向是反的，

	flex-column:显示为列
    主轴为垂直方向，起点在上沿

  flex-column-severse:显示为列
  主轴为垂直方向 ，起点在下沿

2 flex-wrap属性
默认情况下子项都会排列在一条水平线上，flex-wrap属性定义了，一条线上排不下该怎么换行

	 nowrap: 不换行
	比如：1 2 3 4 5 6  7 8 9都排在一条轴线上
	默认值，不进行换行处理
	
	 wrap：换行
	比如：1 2 3 4 5 6 7
	     8 9第一行在上面
	
	 wrap-severse：反向换行
	 比如： 9 8  7
	        1 2 3 4 5 6

flex-fiow:

    是flex-direction和flex-wrap的复合写法
    
	flex-flow：flex-direction 和 flex-wrap
	
	顺序是：flex-direction在前面 
	
			lex-wrap在后面

justify-content:
justify-content:属性定义了主轴方向上的子项的对齐方式和分布方式

flex-start：子项在起点位置对齐

flex-end：子项在结束位子对齐

center：子项在中心位置对齐

space-between两端顶对齐
between是中间的意思，就是多余的空白间距在元素中间分配 

space-around：
 around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。

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

align-items：每一行中的子元素上下对齐方式

flex-start：子项在起点对齐
flex-end：子项在终点对齐
center：子项在中心位置对齐

align-content：侧轴的对齐方式
（嘴少两行才能看出效果，因为他是多行的一个上下对齐方式）
flex-start：子项在起点位置对齐

flex-end：子项在结束位子对齐

center：子项在中心位置对齐

space-between两端顶对齐
between是中间的意思，就是多余的空白间距在元素中间分配 

space-around：
 around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的         空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly：
 evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

第二部分

添加到子项上的

flex-grow：扩展
	 0：是默认值，不去扩展
	 1：扩展，会把空白区域全部沾满
	 子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。
flex-shrink：收缩
	 正常默认值是1
      0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。

 .item {
	  align-self: auto | flex-start | flex-end | center | baseline | stretch;
	}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

第二次写博客写的不好如果有错其大家提出

来源：CSDN

作者：铁憨憨2号

链接：https://blog.csdn.net/weixin_45808386/article/details/104570628

标签

弹性