CSS——Flex布局

Flex

什么是Flex？

flex的概念

flex就是弹性盒子，只要给盒子设置display：flex，就可以拥有一个弹性盒子。能够自适应布局，响应式地实现布局。

flex的作用

1、解决元素居中问题

第一种：给父盒子设置display：flex变成弹性布局，设置主轴对齐方式居中，交叉轴对齐方式居中。

 			display: flex;
            /* 设置主轴居中 */
             justify-content: center; 
            /* 设置交叉轴居中 */
            align-items: center;
            
  第二种：给父盒子设置display：grid，再设置主轴对齐方式居中，交叉轴对齐方式居中。

			display: grid;
            /* 设置主轴居中 */
             justify-content: center; 
            /* 设置交叉轴居中 */
            align-items: center;

第三种：给父盒子设置display：flex变成弹性布局，给子元素设置margin：auto。

.parent{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 1、利用伸缩盒布局 */
            display: flex；
        }
        .child{
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

效果图：

   2、 自动弹性伸缩，合适适配不同大小的屏幕，和移动端

flex的常见术语

序号	术语
容器	container
项目（弹性元素）	item
主轴	main-axis
交叉轴	cross-axis
起始线	main/corss-start
结束线	main/cross-end

flex容器属性

1、flex-direction  			主轴的方向
2、flex-warp         		主轴满了是否换行
3、flex-flow		  		1和2的组合
4、justify-content  		主轴元素对齐方式
5、align-items				交叉轴元素对齐方式（单行）
6、align-content			交叉轴元素对齐方式（多行）

1、flex-direction 主轴方向

row（默认值）		主轴方向为水平方向，起点在左端
row-reverse			主轴方向为水平，起点在右端
column					主轴为垂直方向，起点在上方
column-reverse		主轴为垂直方向，起点在下方

2、flex-warp 换行

1、nowarp(默认值）   不换行  
2、warp				换行
3、wrap-reverses    反向换行

3、flex-flow

flex-low: [flex-direction] [flex-wrap]
1、flex-flow: row wrap; 				主轴方向水平 换行
2、 flex-flow: row nowrap;			主轴方向水平，不换行
3、flex-flow: column nowrap;		主轴方向垂直，不换行
4、 flex-flow: column wrap;			主轴方向垂直，换行

还有更改主轴的起始方向等，就不列举了。

4、justify-content 主轴元素的对齐方向

这里假设主轴方向为水平。

1、flex-start;					沿主轴起点的方向对齐
2、flex-end;					沿主轴终点方向对齐
3、center;						居中对齐
4、space-around			分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
5、space-between			两端对齐，靠着容器壁，剩余空间平分
6、space-evenly			平均对齐，不靠着容器壁，剩余空间平分

5、align-items 交叉轴的元素对齐方式

1、baseline    	基线对齐 根据文字来对齐
2、flex-end		沿交叉轴的起点对齐
3、flex-start	沿交叉轴的终点对齐
4、center		居中对齐
5、stretch		伸展，如果项目未设置高度或设为auto，将占满整个容器的高度。

6、align-content 交叉轴元素对齐方式（多行）

1、flex-start 			(每一行)(默认)沿着交叉轴方向的起点开始对齐
2、flex-end   			(每一行)沿着交叉轴方向的终点开始对齐
3、center    			(每一行)沿着交叉轴居中对齐
4、space-between 		(每一行)两端对齐，靠着容器上下壁，剩余空间平分
5、space-around 		(每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
6、align-content: space-evenly;    (每一行)平均对齐，不靠着容器壁，剩余空间在每个项目平均分配

6、strentch      		(每一行)伸缩，占满整个高度

flex项目（弹性元素）属性

flex-grow：长大
flex-shrinik: 缩小
align-self: 覆盖container align-items 属性
order 排序
flex-basis: 有效宽度

1、flex-grow

• 在容器主轴上存在剩余空间时，flex-grow才有效。
• 该属的值，称为变大因子，常见的属性值有：

属性值	描述
0（默认值）	不放大，保持初始值
initial	设置默认值，与0等效
n	放大因子：正数

2、flex-shrinik

• 当容器主轴“空间不足”且“禁止换行”时，flex-shrink才有意义
• 该属性的值，称为收缩因子，常见的属性有：

属性值	描述
1（默认值）	允许项目收缩
initial	设置默认值，与1等效
0	禁止收缩，保持原始尺寸
n	收缩因子：正数

3、align-self: 覆盖container align-items 属性

• 该属性可覆盖容器的align-item，用自定义某个弹性元素的对齐方式

属性值	描述
auto（默认值）	继承align-items属性值
flex-start	与交叉轴起始线对齐
flex-end	与交叉轴终止线对齐
center	与交叉轴中间线对齐；居中对齐
stretch	在交叉轴方向上拉伸
baseline	基线对齐（使用较少）

4、order 排序

将元素重新排序
order的属性值为正数

5、flex-basis: 有效宽度

定义了在分配多余空间之前，项目占据的主轴空间。