【学习笔记】弹性布局

一、flex布局原理

传统布局中margin：auto没法实现自动垂直居中，而flex布局自带垂直居中

当父级设为flex布局后，子元素的float，clear，vertical-align属性将失效，子元素如果是行内元素转为支持宽高设置

伸缩布局=弹性布局=伸缩盒模型=弹性盒布局=flex布局

采用flex布局的元素称为flex容器，它的所有子元素自动成为容器成员，称为flex项目flex item

原理总结：通过给父级添加flex属性，来控制子元素的位置和排列方式

二、常见父项属性（6个）

1. Flex-direction 设置主轴方向

在flex布局中，分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

主轴是会变化的，看flex-direction设置谁为主轴，剩下的即侧轴。

子元素跟着主轴来排列

属性值	说明
row	如果不设置flex-direction，默认为row
Row-reverse	从右到左
Column	从上到下
Column-reverse	从下到上

2. justify-content

定义了项目在主轴上的对齐方式

属性值	说明
Flex-start	默认值 从头部开始延主轴方向依次排开
Flex-end	从尾部开始排列
Center	在主轴居中对齐（主轴为x轴水平居中，y轴-垂直居中）
Space-around	平分剩余空间，子项相邻空间不会重叠，出现两头窄中间是两头2倍间距的情况
Space-between	先两边贴边，再平分剩余空间（重要！）

有一类名为container的父盒子，有三个子级p标签
.container{
	display: flex;
	/*主轴默认为x轴*/
	justify-content: center; /*水平居中*/
}
.container{
	display: flex;
	flex-direction: column; /*主轴变为y轴*/
	justify-content: center; /*垂直居中*/
}

3. Align-items 设置侧轴上的子元素排列方式（单行）

属性值	说明
Flex-start	默认值 从上到下
Flex-end	从下到上
Center	挤在一起居中（垂直居中）
Stretch	拉伸 （子元素不要给高度，否则无效！）

flex实现水平垂直居中
.container{
	display: flex;
	justify-content: center;
	align-items: center;
}
.container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

4. Flex-wrap 设置子元素是否换行

<1> 默认情况下，项目都排在一条线上，flex布局中默认是不换行的，如果装不开，会缩小子元素的宽度

<2> 只设置了换行的情况下，各行之间有空隙，是由flex-wrap机制导致，剩余高度由所有行平分，各行在主轴上依旧以flex-start为默认值。

属性值	说明
nowrap	默认值，不换行
wrap	换行

5. Align-content 设置侧轴上的元素的排列方式（多行，需要wrap）

设置子项在侧轴上的排列方式并且只能用于子项换行的情况，在单行是没有效果的

属性值	说明
Flex-start	在侧轴的头部开始排列
Flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
Space-around	子项在侧轴平分剩余空间,子项相邻空间不会重叠，出现两头窄中间是两头2倍间距的情况
space-between	子项在侧轴先贴两头再分配剩余空间
Stretch	子项元素撑开至等于父级高度

Align-content和align-items区别&#