頁面布局的兩種方法

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