页面布局的两种方法

页面布局的两种方法

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">
    <div class="the-container">
      <el-row :gutter="10" type="flex">
        <el-col :span="16" style="border: 1px solid #c91a1a">
          <div class="left-row">
            <h1>layout1</h1>
            <h1>test</h1>
          </div>
        </el-col>
        <el-col :span="8" style="border: 1px solid #c91a1a">
          <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" style="border: 1px solid #c91a1a">
          <div class="left-row">
            <h1>layout1</h1>
            <h1>test</h1>
          </div>
        </el-col>
        <el-col :lg="12" :md="8" xs="24" style="border: 1px solid #c91a1a">
          <div class="right-row">
            <h1>demo1</h1>
          </div>
          <div class="right-row">
            <h1>demo2</h1>
          </div>
        </el-col>
      </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 定义元素的最小宽度值。默认值：取决于浏览器。
% 定义基于包含它的块级对象的百分比最小宽度。

实例

<template>
  <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>

参考网址

element官网-el-row：https://element.eleme.cn/#/zh-CN/component/layout

菜鸟教材-flex属性：https://www.runoob.com/cssref/css3-pr-flex.html