页⾯布局的两种⽅法页⾯布局的两种⽅法
1.通过element-ui中的el-row来进⾏布局
⾏列格式如下：
<el-row>
<el-col>
<div>
<h1>123</h1>
</div>
</el-col>
</el-row>
在element中可将每⾏划分为24个分栏，然后根据需求⾃由分配。
⾏属性
列属性
常⽤参数说明
:gutter    表⽰栅格间距，指不同el-col列中的组件之间的距离，el-col的边界没有变化。
:type    表⽰布局模式，常⽤参数为"flex"，让所有弹性盒模型对象的⼦元素都有相同的长度，且忽略它们内部的内容:justify    表⽰在flex布局下的⽔平排列⽅式。
justify=center 居中对齐
justify=start 左对齐
justify=end 右对齐
justify=space-between 空格间距在中间对齐
justify=space-around 左右各占半格空格对齐
:span    表⽰栅格占据的列数。
响应式布局是指在不同尺⼨下可以给出不同的排列⽅式
:xs      <768px 响应式栅格数或者栅格属性对象
:sm      ≥768px 响应式栅格数或者栅格属性对象
:md      ≥992px 响应式栅格数或者栅格属性对象
:lg      ≥1200px 响应式栅格数或者栅格属性对象
:xl      ≥1920px 响应式栅格数或者栅格属性对象
实例
<template>
<div class="app-container">
flex布局对齐方式
<div class="the-container">
<el-row :gutter="10" type="flex">
<el-col :span="16" >
<div class="left-row">
<h1>layout1</h1>
<h1>test</h1>
</div>
</el-col>
<el-col :span="8" >
<div class="right-row">
<h1>demo1</h1>
</div>
</el-col>
</el-row>
<el-row :gutter="10" type="flex">
<el-col :lg="12" :md="16" :xs="24" >
<div class="left-row">
<h1>layout1</h1>
<h1>test</h1>
</div>
</el-col>
<el-col :lg="12" :md="8" xs="24" >
<div class="right-row">
<h1>demo1</h1>
</div>
<div class="right-row">
<h1>demo2</h1>
</div>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: 'Index',
}
</script>
<style lang="scss" scoped>
.app-container {
height: 100%;
background-color: #f1f1f1;
}
.the-container{
/*内边距*/
padding: 20px;
/*⾼度*/
height: 100%;
/*背景颜⾊*/
background-color: #fff;
}
.left-row{
/*边框*/
border: 1px solid black;
background-color: #20a0ff;
}
.right-row{
border: 1px solid black;
background-color: #20a0ff;
}
</style>
2.通过flex布局
Flex是Flexible Box的缩写，意为"弹性布局"，⽤来为盒状模型提供最⼤的灵活性。设为Flex布局以后，⼦元素的float、clear和vertical-align属性将失效。
flex的常⽤参数属性
⾸先如果想要使⽤flex的参数就必须在css中表⽰布局⽅式为flex(弹性)布局，也就是display: flex
flex
⽤于设置或检索弹性盒模型对象的⼦元素如何分配空间。如果元素不是弹性盒模型对象的⼦元素，则 flex 属性不起作⽤。
flex-basis
⽤于设置或检索弹性盒伸缩基准值，默认值为auto。
flex-direction
规定灵活项⽬的⽅向，默认值为row。
flex-shrink
指定了 flex 元素的收缩规则，默认值为1。
其他常⽤参数属性
min-width
min-width 属性设置元素的最⼩宽度。
length 定义元素的最⼩宽度值。默认值：取决于浏览器。
% 定义基于包含它的块级对象的百分⽐最⼩宽度。
实例
<div class="app-container">
<div class="the-container">      <div class="the-body">
<div class="body-left">
<h1>left</h1>
<h1>test1</h1>
<h1>test2</h1>
</div>
<div class="body-right">          <h1>right</h1>
<h1>test</h1>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Index'
}
</script>
<style lang="scss" scoped>
.app-container {
height: 100%;
background-color: #f1f1f1;
}
.the-container{
padding: 20px;
height: 100%;
background-color: #fff;
}
.the-body{
border: 1px solid red;
display: flex;
height: 100%;
}
.body-left{
height: 100%;
background-color: #20a0ff;
border: 1px solid black;
/*布局⽅式：弹性布局*/
display: flex;
/*弹性盒的长度*/
flex-basis: 25em;
/*元素的收缩规则*/
flex-shrink: 0;
/
*项⽬的⽅向*/
flex-direction: column-reverse;  }
.body-right{
height: 100%;
background-color: #20a0ff;
border: 1px solid black;
display: flex;
/*弹性盒⾃动分配*/
flex: auto;
flex-direction: column;
/*段落最⼩宽度*/
min-width: 0;
}
</style>
参考⽹址

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。