CSS3 弹性盒
弹性盒
文档流：所显即所在 优点（阅读性好 维护性好） 缺点（不够灵活）
脱离文档流 浮动（功能单一） 定位（阅读和维护难度高）
弹性盒，表现灵活 阅读和维护性好
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
display:flex 即设为弹性盒
父盒子定义display:flex样式属性
每一个子元素即变为弹性的盒子了 脱离文档流 默认横排
学习弹性盒注意一个父子元素的概念 父设子规
父元素即容器上的设置项：
设置display:flex后的后续设置
<html lang="en">
<head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<span>logo</span>
<span>搜索</span>
</div>
</div>
</body>
- flex-direction 决定轴的方向
1.row 默认值。元素将水平显示，正如一个行一样。
.nav{
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
flex-direction: row;
}
2.row-reverse 与 row 相同，但是以相反的顺序。
.nav{
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
flex-direction: row-reverse;
}
3.column 元素将垂直显示，正如一个列一样。
.nav{
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
flex-direction: column;
}
4.column-reverse 与 column 相同，但是以相反的顺序。
.nav{
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
flex-direction: column-reverse;
}
-
flex-wrap 控制换行情况
1.nowrap 默认值。规定元素不换行。
2.wrap 规定元素在必要的时候换行。
3.wrap-reverse 规定元素在必要的时候以相反的顺序换行。先按正序换行然后将行倒叙 -
flex-flow 轴和换行的简写
1.flex-container { flex-flow: <flex-direction> <flex-wrap> } -
justify-content 以交叉侧轴为中心的集聚方式（元素在主轴方向上的对齐方式）
1.flex-start默认值。项目位于容器的开头。
2.flex-end项目位于容器的结尾。
3.center项目位于容器的中心。
4.space-between项目位于各行之间留有空白的容器内。
5.space-around项目位于各行之前、之间、之后都留有空白的容器内。
- align-items 以交叉横轴为中心的挤聚方式（子元素需要设置宽高）
1.stretch 项目被拉伸以适应容器。
2.center 项目位于容器的中心。
3.flex-start 默认值 项目位于容器的开头。
4.flex-end 项目位于容器的结尾。
5.baseline 项目位于容器的基线上。
-
flex-item 弹性盒子元素属性
1.order设置弹性盒子的子元素排列顺序。int 默认为0 小的在前
2.flex-grow设置或检索弹性盒子元素的扩展比率。int
3.flex-shrink指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器 的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。int 默认值1 -
align-self在弹性子元素上使用。覆盖容器的 align-items 属性。
1.auto默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
2.stretch元素被拉伸以适应容器。
3.center元素位于容器的中心。
4.flex-start元素位于容器的开头。
5.flex-end元素位于容器的结尾。
6.baseline元素位于容器的基线上。
7.initial设置该属性为它的默认值。
8.inherit从父元素继承该属性。
