Flex布局小结
什么是Flex布局
Flex就是flexbox ，是一种布局模型
要注意的是使用lex 布局以后，子元素的float、clear和vertical-align属性将失效
Flex的属性和使用
使用display属性指定元素为flex布局
div{
display: flex;
}
flex容器.jpg
使用 flex 布局的元素，称为 flex 容器(flex container)。它的所有子元素自动成为容器成员，称为 flex 项目(flex item)。
flex容器的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
- flex-direction
决定了项目的方向
div {
flex-direction: row(默认) | row-reverse | column | column-reverse;
}
row：item从左到右，横向排列
row-reverse：item从右到左，横向排列
column：item从上往下，纵向排列
column-reverse：item从下往上，纵向排列
- flex-wrap
控制项目是否换行
注意如果将flex-direction属性从row(横向)修改为column（纵向），项目可能会在纵轴上并不会等分容器高度，而是直接超出容器
div{
flex-wrap: nowrap(默认) | wrap | wrap-reverse;
}
nowrap：不换行
wrap：换行。项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。
wrap-reverse：换行，第一排会在容器底部，效果与wrap相反
3.flex-flow
它是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
div {
flex-flow: <flex-direction> || <flex-wrap>;
}
4.justify-content
控制项目在横轴（根据direction的值决定，主要说横轴）的对齐方式
div {
justify-content: flex-start(默认) | flex-end | center | space-between | space-around;
}
flex-start：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5.align-items
控制项目在纵轴排列方式
div {
align-items: flex-start | flex-end | center | baseline | stretch(默认);
}
stretch：如果项目没设置高度，或高度为auto，则占满整个容器
flex-start：会让项目在纵轴紧贴容器顶部
flex-end：会让项目在纵轴紧贴容器底部
center：在纵轴中心位置排列
6.align-content
用于控制多行项目的对齐方式,如果项目只有一行则不会起作用
div {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
stretch：即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。
flex-start：项目在顶部排列
flex-end：项目在底部排列
center：排列在容器中间
space-between：效果和justify-content一样
space-around：效果和justify-content一样
flex项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1.order
默认为0，数值越小越靠前
.item{
order: <integer>;
}
2.flex-grow
默认0不放大，用于决定项目在有剩余空间的情况下是否放大
.item {
flex-grow: <number>;
}
假设第一个项目为0，第二个为1，第三个为2，那么后两个项目按比例平分剩余空间。
3.flex-shrink
默认1，用于决定项目在空间不足时是否缩小
数值为0，即便空间不够，自身也不缩小。
数值不能为负数
.item {
flex-shrink: <number>;
}
4.flex-basis
默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度
flex-basis权重>width权重,因此会覆盖widtn属性
.item {
flex-basis: <length> | auto(默认);
}
5.flex
是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。默认0 1 auto
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6.align-self
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
与align-items属性一致
auto(默认)
flex-start
flex-end
center
baseline
stretch
align-self：flex-end图示
