頁面佈局的兩種方法

阿新 • • 發佈：2021-09-22

頁面佈局的兩種方法

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>