一、簡介

el-col：列。是Element UI布局中的核心組件，他的作用的將一行分成24個網(wǎng)格，為了方便我們在不同的設備上適配不同的屏幕大小。我們可以通過指定span屬性來確定一行中所占的網(wǎng)格數(shù)。

el-row：行。包裹在el-col外層，其中可以有無數(shù)個el-col。

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="24">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

?

在正常形態(tài)下，:span默認為24。假如:span為12，那么就是原本列數(shù)的一半。

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

??

二、el-row的屬性：

:gutter? 調(diào)整布局之間的寬度---分欄間隔。（也就是兩列之間的間隔距離）

原代碼：

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
      <el-col :span="12">
        <div style="background:yellow;height:100px"></div>
      </el-col>
    </el-row>

?如果兩個div間需要間隔以示區(qū)分。就用:gutter屬性。

    <el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
      <el-col :span="12">
        <div style="background:yellow;height:100px"></div>
      </el-col>
    </el-row>

?然而在網(wǎng)頁頁面代碼中，其代碼顯示為：

?也就是說，:gutter屬性其實是設置了div的padding屬性。

三、el-col屬性

（1）:offset? 調(diào)整方塊的位置（每次1格/24格）

    <el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
      <el-col :offset="6" :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

（2） :push 向右移動格數(shù)，值為1-24之間整數(shù)

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12" :push="2">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

?

?文章來源地址http://www.zghlxwxcb.cn/news/detail-558245.html

（3）:pull 向左移動格數(shù)，值為1-24之間整數(shù)

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12" :pull="2">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

?

?（4）Element UI響應式布局

xs：<768px 響應式柵格數(shù)或者屬性對象，超小屏，比如手機。例如：{ span: 4, offset: 8 }

sm：≥768px 響應式柵格數(shù)或者屬性對象，小屏幕，比如平板。例如：{ span: 4, offset: 8 }

md：≥992px 響應式柵格數(shù)或者屬性對象，中等屏幕，比如桌面顯示器。例如：{ span: 4, offset: 8 }

lg：≥1200px 響應式柵格數(shù)或者屬性對象，大屏幕，比如大桌面顯示器。例如：{ span: 4, offset: 8 }

xl：≥1920px 響應式柵格數(shù)或者屬性對象，超大屏幕顯示器，比如2k屏等。例如：{ span: 4, offset: 8 }

<el-col :span="20" :xl="{span:16}"></el-col>

?三、對齊方式

通過設置type="flex"，啟動flex布局，通過justify的屬性調(diào)整排版方式。

justify都屬性值：center 居中對齊 start 左對齊 end 右對齊 space-between 空格間距在中間對齊 space-around 左右各占半格空格對齊

    <el-row type="flex" justify="center" style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

?

到了這里，關于Element UI組件中el-col、el-row布局學習筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！