前端必须熟悉的几种布局方式

前端必须熟悉的几种布局方式

【摘要】前端必须熟悉的几种布局方式前言最近在准备整理基础，准备跳槽，找个好一点的东家。?记录学习整理的过程，希望能帮到年后跳槽的你，让我们一起来巩固基础吧。

目前在一家国企单位，朝九晚五的生活让我感到舒适，有大量的时间，做自己喜欢的事。时间久了，我感到了焦虑，由于公司是非互联网，开发也是根据自己已知技术去开发，技术成长很慢，技术氛围没那么强，想突破一下自己，是该逃离舒适区了。

本章主要是回顾Flex使用和一些常用布局的写法。熟悉HTML页面架构和常用布局FlexFlex概念采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称"项目"。注意：任何一个容器都可以指定为Flex行内元素也可以指定为Flex布局，display:inline-flex;Webkit内核的浏览器，必须加上-webkit前缀。display:-webkit-flex;/Safari/容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis）。主轴的开始位置（与边框的交叉点）叫做mainstart，结束位置叫做mainend；交叉轴的开始位置叫做crossstart，结束位置叫做crossend。项目默认沿主轴排列。单个项目占据的主轴空间叫做mainsize，占据的交叉轴空间叫做crosssize。容器属性作用于父容器的属性属性功能描述flex-direction属性决定主轴的方向（即项目的排列方向）。flex-wrap默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行justify-content决定了子元素在主轴的对齐方式。align-items决定了子元素在交叉轴(竖轴）的对齐方式align-content决定了多条轴线的对齐方式。flex-direction该属性决定了主轴以什么方向排列row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。flex-direction:column;flex-direction:row-reverseflex-direction:row-reverse;flex-wrap该属性决定了元素是否在一条轴线上，通过指定它的属性可以子元素换行。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该元素定义了多条轴的对齐方式，当只有一根轴时，不起作用。属性：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可以将子元素按大小排序，值越小，排名越靠前。flex-grow可以将子元素按一定比例排列，如果子元素值都一样，那么子元素会等比例排列。flex-shrink如果空间不足时，可以使用它将子元素按比例缩小flex-basis它决定在主轴分配空间之前，项目占主轴的大小。浏览器会根据剩余的空间来，计算它的大小。flex-self它可以指定某个元素和其它元素的排列方式不同。order父容器为flex.时，子元素可以通过order达到排序的功能，数值越小，排列最前面。<divclass="main">

<divclass="son1">

</div>

<divclass="son2">

</div>

<divclass="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该属性用来指定子元素在父容器中按比例指定大小，如果每一项都指定比例相同的话，那么元素会平分排列布局。<divclass="main">

<divclass="son1">

</div>

<divclass="son2">

</div>

<divclass="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{

height:100px;

border-radius:15px;

margin:10px;

flex-grow:2;

background:coral;

}

.son2{

height:100px;

border-radius:15px;

margin:10px;

flex-grow:2;

background:darkcyan;

}

.son3{

height:100px;

border-radius:15px;

margin:10px;

flex-grow:2;

background:gold;

}

</style>flex-shrink该属性是按比例缩小子元素，默认为1，当主轴空间不足时，它会按比例缩小。<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:200px;

height:100px;

border-radius:15px;

margin:10px;

/*缩小5的比例*/

flex-shrink:5;

background:coral;

}

.son2{

width:160px;

height:100px;

border-radius:15px;

margin:10px;

background:darkcyan;

}

.son3{

width:160px;

height:100px;

border-radius:15px;

margin:10px;

background:gold;

}

</style>flex-basis该属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。.son1{

/*指定了宽度没有作用，flex-basis决定了占据主轴多少宽度，

浏览器会根据剩余宽度来计算主轴还有多少宽度*/

width:300px;

height:100px;

border-radius:15px;

margin:10px;

flex-basis:100px;

background:coral;

}

.son2{

width:160px;

height:100px;

border-radius:15px;

margin:10px;

background:darkcyan;

}

.son3{

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{

border-radius:15px;

margin:10px;

flex-basis:100px;

background:gold;

align-self:stretch;

}常用布局全屏布局全局布局由顶部，主体，底部构成。通常一般固定顶部和底部高度,主体自适应这样就实现了全屏布局。可以使用语义化标签，header,mainfooter.下面通过Flex布局来达到全屏布局的效果。在最外层套一个容器，给容器指定display:flex;在容器中指定子元素的排列方式，flex-direction:column;顶部和底部高度，主体使用flex:1比例来达到自适应。flex是flex-grow、flex-shrink、flex-basis的缩写flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis属性：定义了在分配多余空间之前，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。<divclass="full">

<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);

}两列布局最经典的系统管理布局两列布局.它主要由是两列都固定高度，左端指定宽度,右端通过flex:1来达到自适应宽度。<divclass="full">

<divclass="left">

</div>

<divclass="right">

</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{

flex:1;

height:100vh;

background:rgb(158,159,160);

}后台系统布局我在写后台时，布局页面除了像两列布局这种的，也会有这种布局，我叫它后台系统布局?。它的特点：它其实也是两列布局，只是它在右端分为顶部和主体两部分，顶部会放置一些点击左侧菜单关联的菜单，主体放置点击菜单显示的内容如何进行布局它和两列布局基本相同，不同点就是它在右端显示不一样右端分为主体和顶部，顶部固定高度,主体通过flex:1来达到自适应右端容器通过flex-direction:column;指定子元素按交叉轴(竖轴)排列布局。<divclass="full">

<divclass="left">

</div>

<divclass="right">

<divclass="right-head">

</div>

<divclass="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;

}居中布局居中布局在我们日常写页面时经常用到，场景也比较多，eg：登陆,弹窗Dialog.这里我使用flex来实现居中布局，flex实现起来更简洁，这里就不讨论其它实现方法了。如何进行布局通过给父容器的宽度和高度都100%，铺满整个屏幕，父容器display为flex,使用justify-content:center;决定子元素在主轴的方向上怎么显示，在通过align-items:center;来决定子元素在交叉轴(竖轴)如何显示。子容器只要指定width和·height即可。<divclass="full">

<divclass="login">

登陆

</div>

</div>*{

margin:0;

padding:0;

}

.full{

width:100%;

height:100vh;

background:rgb(0,110,255);

display:flex;

justify-content:center;

align-items:center;

}

.login{

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实现，开发中为了节省时间，可以使用库来实现。<divclass="container">

<divclass="waterFall">

<divclass="item">

<imgsrc="/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1737312773,3182446833&fm=26&gp=0.jpg"

alt="">

<p>First</p>

</div>

<divclass="item">

<imgsrc="/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875486819,805819368&fm=26&gp=0.jpg"alt="">

<p>First</p>

</div>

<divclass="item">

<imgsrc="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=35353288,1650949252&fm=26&gp=0.jpg"alt="">

<p>First</p>

</div>

<divclass="item">

<imgsrc="/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474216128,3433531408&fm=26&gp=0.jpg"

alt="">

<