flex
flex 中文意思为弹性布局。 display：flex
flex是w3s推出的，除盒状布局之外的一种新布局逻辑。
flex将页面视为主轴（main axis）和交叉轴（cross axis），默认水平为主轴，左为主轴起点（main start），上为交叉轴起点（cross start）
设置为flex布局后，子元素的float、clear、vertical-align属性将会失效。
我们将采用flex布局的元素称为flex容器（flex container）。而它的所有子元素将成为容器成员，称为项目（flex item）
项目默认按主轴排列。单个项目占据的主轴空间叫做main size ，交叉轴空间成为 cross size
flex布局
> 容器的属性
flex-direction 主轴方向 默认：row 水平为主轴
flex-wrap 如果交叉轴一条轴上排不下时，如何换行 默认：nowwrap 不换行
flex-flow 为dircetion 和wrap的简写模式 默认：row nowrap
justify-content 定义主轴上的对齐方式 默认：flex-start 左对齐
align-items 交叉轴上的对齐方式 默认：stretch 占满容器高度
align-content 多根轴线的对齐方式 默认：stretch 占满交叉轴
> 项目的属性
order 项目的排列顺序
flex-grow 项目的放大比例
flex-shrink 缩小比例
flex-basis 项目占用的主轴空间
flex-grow shrink basis的简写 默认： 0 1 auto
align self 单个项目的对齐方式 默认：继承容器的align-item属性
参考文档：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
盒状布局
盒状布局以元素+定位的搭配，实现页面的布局。
盒状布局将元素视为框。
框分为两种类型、定位分为四种。
定位定义着框的所属流。
所属流分为三种：普通流、浮动流、绝对定位流。
不同流中的框互不影响。
盒状布局的不同流
> 框的属性
框的两种类型为块框和行内框。
display：block ｜inline
注：不同的元素有不同的默认display属性，sapn和input 的display属性为inline
> 定位属性
position 定位的类型 默认：static
top 上
right 右
bottom 下
left 左
overflow 溢出处理方式 默认：visible
clip 元素的形状 默认：auto
vertical- align 垂直对齐方式 默认：baseline
z-index 堆叠顺序
> 框对应定位的所属流
position有四种属性 static ｜relative｜absolute｜fixed
absolute 和fixed 的元素将会生成在绝对定位流中
剩余两种会生成在普通流中
> 浮动
float：left 每个框向左浮动。
此时元素将生成在浮动流中
为了兼容浮动流和普通流，通过添加一个空元素，并赋以clear属性使得浮动元素在普通流的容器中占据位置。
> 常用场景
* 令弹窗居中（flex应用）
.box{
display: flex; //弹性布局
display: -webkit-flex;
border: 1px solid #0000FF;
height: 200px;
width: 400px;
align-items:center; //项目排列 居中
justify-content:center; //对齐方式 居中对齐
}
.item{
width: 50px;
height: 40px;
border: 1px solid #00C1B3;
}
* 令弹窗居中（position：fixed应用）
.box{
background:whitesmoke;
position:fixed;
top:50%;
left:50%;
transform:translateX(-50%)translateY(-50%);
min-width:700px;
border-radius:8px;
padding:0px
}
* 骰子布局
3的布局
.box {display:flex;}
.item:nth-child(2) {align-self:center;}.
item:nth-child(3) {align-self:flex-end;}
* 网格布局
根据页面大小自动缩放网格
.Grid {display:flex;}.Grid-cell {flex:1;}
* 圣杯布局（flex应用）
页面从上到下，从左到右分为三个区域
html部分：
<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>...</footer>
</body>
CSS部分：
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer {
flex: 1;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}
* 圣杯布局（position应用）
html部分：
<body>
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">#center</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
css部分：
body {
min-width: 550px; /* 2x leftContent width + rightContent width */
font-weight: bold;
font-size: 20px;
}
#header, #footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#footer {
clear: both;
}
#container {
padding-left: 200px; /* leftContent width */
padding-right: 150px; /* rightContent width */
overflow: hidden;
}
#container .column {
position: relative;
float: left;
text-align: center;
height: 300px;
line-height: 300px;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px; /* leftContent width */
right: 200px; /* leftContent width */
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px; /* rightContent width */
margin-left: -150px; /* rightContent width */
right: -150px;
background: rgb(231, 105, 2);
}
* 输入框布局
.InputAddOn {display:flex;}.InputAddOn-field {flex:1;}
* 固定底栏
.Site {display:flex;min-height:100vh;flex-direction:column;}.Site-content {flex:1;}
* 流式布局
.parent {width:200px;height:150px;background-color:black;display:flex;flex-flow:row wrap;align-content:flex-start;}
.child {box-sizing:border-box;background-color:white;flex:0 0 25%;height:50px;border:1px solid red;}
参考文档：
小记：flex和盒状是两种不同的布局思路，flex设定了更多种对齐类型，减少了对长宽等属性的关注，只需对部分固定宽度的项目进行设定，剩下就可以交由浏览器自行处理。盒装更像是作画的思路，设定好页面上的每一像素，最后就会得到一副画。相对来说flex布局减少了对每个框的关注，对个人来说，减少了工作量。
（但盒状布局也很惊艳，如果有理解错误的地方欢迎指出，谢谢
网友评论