前言
--
最近在准备整理基础，准备年后跳槽，找个好一点的东家。? 记录学习整理的过程，希望能帮到年后跳槽的你，让我们一起来巩固基础吧。undefined目前在一家国企单位，朝九晚五的生活让我感到舒适，有大量的时间，做自己喜欢的事。时间久了，我感到了焦虑，由于公司是非互联网，开发也是根据自己已知技术去开发，技术成长很慢，技术氛围没那么强，想突破一下自己， 是该逃离舒适区了。 本章主要是回顾Flex使用 和 一些常用布局的写法。
熟悉HTML页面架构和常用布局
Flex
Flex 概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。注意：任何一个容器都可以指定为
Flex行内元素也可以指定为Flex布局，display: inline-flex; Webkit 内核的浏览器，必须加上-webkit前缀。display: -webkit-flex; / Safari /
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做
main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器属性
作用于父容器的属性
属性 | 功能描述 |
|---|---|
| 属性决定主轴的方向（即项目的排列方向）。 |
| 默认情况下，项目都排在一条线（又称"轴线"）上。 |
| 决定了子元素在主轴的对齐方式。 |
| 决定了子元素在交叉轴(竖轴）的对齐方式 |
| 决定了多条轴线的对齐方式。 |
flex-direction
代码语言：txt复制
该属性决定了主轴以什么方向排列row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
flex-direction: column;
``````flex-direction:row-reverse
flex-direction: row-reverse;
`
flex-wrap
代码语言：txt复制
该属性决定了元素是否在一条轴线上，通过指定它的属性可以子元素换行。nowrap:默认，不换行。wrap: 让子元素在一条线上有序的排列着，当一条线排不下的时候，会换行。wrap-reverse: wrap 的反转。
flex-wrap: wrap;
``````flex-wrap: wrap-reverse;
justify-content该属性决定了 子元素 在主轴上的对齐方式属性：flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：均匀排列每个元素,首个元素放置于起点末尾元素放置于终点. 间隔： 元素个数n - 1space-evenly :均匀排列每个元素,每个元素之间的间隔相等。 间隔：元素个数n 1space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
align-items该属性是让子元素如何在交叉抽(竖轴)方向上对齐。属性：flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
`
align-content
代码语言：txt复制
该元素定义了多条轴的对齐方式，当只有一根轴时，不起作用。属性：flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。
align-content: flex-start;
``````align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
`
作用于子元素的属性
属性 | 属性描述 |
|---|---|
| 可以将子元素按大小排序，值越小，排名越靠前。 |
| 可以将子元素按一定比例排列，如果子元素值都一样，那么子元素会等比例排列。 |
| 如果空间不足时，可以使用它将子元素按比例缩小 |
| 它决定在主轴分配空间之前，项目占主轴的大小。浏览器会根据剩余的空间来，计算它的大小。 |
| 它可以指定某个元素和其它元素的排列方式不同。 |
order
代码语言：txt复制父容器为
flex. 时， 子元素可以通过order达到排序的功能，数值越小，排列最前面。
<div class="main">
<div class="son1">
</div>
<div class="son2">
</div>
<div class="son3">
</div>
</div>
<style> .main{
width: 400px;
height: 300px;
border-radius: 15px;
display: flex;
justify-items: center;
align-items: center;
background: lightseagreen;
margin: auto;
margin-top: 200px;
}
.son1{
width: 80px;
height: 100px;
border-radius: 15px;
margin: 10px;
order: 1;
background: coral;
}
.son2{
width: 80px;
height: 100px;
border-radius: 15px;
margin: 10px;
order: 0.2;
background: darkcyan;
}
.son3{
width: 80px;
height: 100px;
border-radius: 15px;
margin: 10px;
order: 3;
background: gold;
} </style>
```flex-grow
代码语言：txt复制
该属性用来指定子元素在父容器中按比例指定大小，如果每一项都指定比例相同的话，那么元素会平分排列布局。
<div class="main">
<div class="son1">
</div>
<div class="son2">
</div>
<div class="son3">
</div>
</div> <style> .main{
代码语言：txt复制width: 400px;height: 300px;border-radius: 15px;display: flex;justify-items: center;align-items: center;background: lightseagreen;margin: auto;margin-top: 200px;}
.son1{
代码语言：txt复制height: 100px;border-radius: 15px;margin: 10px;flex-grow: 2;background: coral;}
.son2{
代码语言：txt复制height: 100px;border-radius: 15px;margin: 10px;flex-grow: 2;background: darkcyan;}
.son3{
代码语言：txt复制height: 100px;border-radius: 15px;margin: 10px;flex-grow: 2;background: gold;} </style>
flex-shrink该属性是按比例缩小子元素， 默认为1， 当主轴空间不足时，它会按比例缩小。<style> .main{
代码语言：txt复制width: 400px;height: 300px;border-radius: 15px;display: flex;justify-items: center;align-items: center;background: lightseagreen;margin: auto;margin-top: 200px;}
.son1{
代码语言：txt复制width: 200px;height: 100px;border-radius: 15px;margin: 10px;/* 缩小5 的比例 */flex-shrink: 5; background: coral;}
.son2{
代码语言：txt复制width: 160px;height: 100px;border-radius: 15px;margin: 10px;background: darkcyan;}
.son3{
代码语言：txt复制width: 160px;height: 100px;border-radius: 15px;margin: 10px;background: gold;} </style>
flex-basis该属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。.son1{
代码语言：txt复制/* 指定了宽度没有作用， flex-basis 决定了占据主轴多少宽度，浏览器会根据剩余宽度来计算主轴还有多少宽度 */width: 300px;height: 100px;border-radius: 15px;margin: 10px;flex-basis: 100px;background: coral;}
.son2{
代码语言：txt复制width: 160px;height: 100px;border-radius: 15px;margin: 10px;background: darkcyan;}
.son3{
代码语言：txt复制height: 100px;border-radius: 15px;margin: 10px;flex-basis: 100px;background: gold;}
flex-self该属性允许单个 元素 和 其它 元素不同的排列方式，覆盖父元素的 aligin-items值：flex-start 左对齐flex-end 右对齐center 居中baseline 项目的第一行文字的基线对齐。stretch 如果项目未设置高度或设为auto，将占满整个容器的高度。.son3{
代码语言：txt复制border-radius: 15px;margin: 10px;flex-basis: 100px;background: gold;align-self: stretch;}
常用布局全屏布局全局布局由 顶部，主体，底部 构成。通常一般固定 顶部 和 底部高度, 主体自适应 这样就实现了全屏布局。可以使用语义化标签， header , main footer.下面通过 Flex 布局来达到全屏布局的效果。在最外层套一个容器，给容器 指定 display: flex;在容器中指定子元素的排列方式， flex-direction: column;顶部和底部高度，主体使用 flex : 1 比例来达到自适应。flex 是 flex-grow、flex-shrink、flex-basis的缩写flex-grow 属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink 属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis 属性：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。<div class="full">
代码语言：txt复制 <header>导航</header> <main>主体内容</main> <footer>底部</footer></div> *{
margin: 0;
padding: 0;
}
.full{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
header{
height: 60px;
font-weight: 900;
color: white;
text-align: center;
background: darkcyan;
}
main{
flex: 1;
align-items: center;
font-weight: 900;
color: white;
text-align: center;
background:orange;
}
footer{
height: 60px;
font-weight: 900;
color: white;
text-align: center;
background: rgb(48, 40, 163);
}
```两列布局
代码语言：txt复制最经典的系统管理布局
两列布局. 它主要由是两列都固定高度，左端指定宽度,右端通过flex:1 来达到自适应宽度。
<div class="full">
<div class="left">
</div>
<div class="right">
</div>
</div> *{
代码语言：txt复制margin: 0;padding: 0;}
.full{
代码语言：txt复制width: 100%;height: 100vh;display: flex;flex-wrap: wrap;}
.left{
代码语言：txt复制width: 200px;height: 100vh;background: rgb(0, 140, 255);}
.right{
代码语言：txt复制flex:1;height: 100vh;background: rgb(158, 159, 160); }
后台系统布局我在写后台时，布局页面除了像 两列布局 这种的，也会有这种布局，我叫它 后台系统布局 ?。它的特点： 它其实也是两列布局，只是它在右端 分为 顶部 和 主体 两部分， 顶部会放置一些点击左侧菜单关联的菜单，主体放置点击菜单显示的内容如何进行布局它和两列布局基本相同，不同点就是它在右端显示不一样右端分为主体和顶部， 顶部 固定高度 , 主体 通过 flex:1 来达到自适应右端容器通过 flex-direction: column; 指定子元素 按交叉轴(竖轴) 排列布局。<div class="full">
代码语言：txt复制 <div class="left"> </div> <div class="right"> <div class="right-head"> </div> <div class="right-main"> </div> </div></div> *{
margin: 0;
padding: 0;
}
.full{
width: 100%;
height: 100vh;
display: flex;
/* flex-wrap: wrap; */
}
.left{
width: 200px;
height: 100vh;
background: rgb(0, 140, 255);
}
.right{
height: 100vh;
display: flex;
flex:1;
flex-direction: column;
background: rgb(158, 159, 160);
}
.right-head{
height: 80px;
background: cornflowerblue;
}
.right-main{
flex: 1;
background: orange;
}
```居中布局
代码语言：txt复制居中布局在我们日常写页面时经常用到，场景也比较多，eg：
登陆,弹窗Dialog.这里我使用flex来实现 居中布局，flex 实现起来更简洁，这里就不讨论其它实现方法了。如何进行布局通过给父容器 的 宽度 和 高度 都 100% ， 铺满整个屏幕， 父容器display为flex, 使用justify-content: center;决定 子元素在主轴的方向上怎么显示，在通过align-items: center;来决定子元素在交叉轴(竖轴)如何显示。 子容器只要指定width和 ·height即可。
<div class="full">
<div class="login">
登陆
</div>
</div> *{
代码语言：txt复制margin: 0;padding: 0;}
.full{
代码语言：txt复制width: 100%;height: 100vh;background: rgb(0, 110, 255);display: flex;justify-content: center;align-items: center;}
.login{
代码语言：txt复制width: 500px;height: 400px;line-height: 400px;text-align: center;border-radius: 15px;background: rgb(70, 25, 129);color: white;font-size: 33px;font-weight: 900;}
瀑布流布局瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！瀑布流的特点：等宽不等高，高度是动态识别图像的高度来显示的。它会当计算当前屏幕的宽度，来显示对应的个数，一行排满的话，它会找到第一行高度最低的继续排列第二行，依次类推排列。实现方法CSS 实现方法： column-count column-gap 来达到分栏排放和每项之间的间距，但使用它有缺点，固定死了 列，不能动态随着浏览器的宽度动态变化而变化分栏。JS实现方法： 固定死图片的宽度， 图片放置到一个数组中， 浏览器根据动态识别宽度来判断当前显示多少项，然后遍历数组，将url 放置 src 中， 下拉刷新数据，重新调取请求数据接口，push到数组中，实现下拉请求数据。本文采用CSS 实现，开发中为了节省时间，可以使用库来实现。<div class="container">
代码语言：txt复制<div class="waterFall"> <div class="item"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1737312773,3182446833&fm=26&gp=0.jpg" alt=""> <p>First</p> </div> <div class="item"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875486819,805819368&fm=26&gp=0.jpg" alt=""> <p>First</p> </div> <div class="item"> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=35353288,1650949252&fm=26&gp=0.jpg" alt=""> <p>First</p> </div> <div class="item"> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474216128,3433531408&fm=26&gp=0.jpg" alt=""> <p>First</p> </div> <div class="item"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=143483417,2871731501&fm=26&gp=0.jpg" alt=""> <p>First</p> </div> <div class="item"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1098989386,3642257866&fm=26&gp=0.jpg" alt=""> <p>First</p> </div> <div class="item"> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1040129980,3013621150&fm=26&gp=0.jpg" alt=""> <p>First</p> </div></div></div>
代码语言：txt复制 .container {
width: 80%;
margin: 0 auto;
}
.waterFall {
/* 页面分几列显示 */
column-count: 4;
-webkit-column-count: 4;
/* Firfox */
-moz-column-count: 4;
/* */
/* 列之间的间距 */
column-gap: 1em;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
}
.item {
padding: 1em;
margin: 0 0 1em 0;
border: 1px solid orange;
}
.item img {
width: 100%;
margin-bottom: 10px;
}
```总结
本文主要是
HTML布局进行查缺补漏复习，下一章将进行BOM的补充。祝愿大家都能找到一份好的工作！
本文转自 https://juejin.cn/post/6916520085217607693，如有侵权，请联系删除。
