[css]flex布局和盒状布局的记录比较 [css]flex布局和盒状布局的记录

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-growshrink 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属性使得浮动元素在普通流的容器中占据位置。

参考文档:https://www.w3school.com.cn/css/css_positioning.asp

> 常用场景 * 令弹窗居中（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部分：

...

...

...

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部分：

#header

#center
#left
#right

#footer

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 */
【[css]flex布局和盒状布局的记录比较】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; }

参考文档：
1.flex布局教程：实例篇.html
2.css经典布局-圣杯布局.html

小记：flex和盒状是两种不同的布局思路，flex设定了更多种对齐类型，减少了对长宽等属性的关注，只需对部分固定宽度的项目进行设定，剩下就可以交由浏览器自行处理。盒装更像是作画的思路，设定好页面上的每一像素，最后就会得到一副画。相对来说flex布局减少了对每个框的关注，对个人来说，减少了工作量。
（但盒状布局也很惊艳，如果有理解错误的地方欢迎指出，谢谢