成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

初探flex布局

Jeffrrey / 1334人閱讀

摘要：一布局概述布局是一種較新盒子模型，在布局模型中，彈性容器的子元素的排布可以比較靈活，可以根據(jù)容器的大小自動(dòng)擴(kuò)展或收縮其大小。下面我們來看用布局怎么解決這些問題。所以學(xué)會(huì)使用布局是非常有必要的。想詳細(xì)了解布局請(qǐng)點(diǎn)擊這里。

一 flex布局 1.1 flex概述

flex布局是一種較新CSS盒子模型，在flex布局模型中，彈性容器的子元素的排布可以比較靈活，可以根據(jù)容器的大小自動(dòng)擴(kuò)展或收縮其大小。也可以比較靈活的處于容器的的某一位置上。所以flex的應(yīng)用場(chǎng)景很多，比如我們碰到需要元素居中的應(yīng)用場(chǎng)景時(shí)，flex布局就變得很有用了。更多關(guān)于flex的說明請(qǐng)看這里。

二 項(xiàng)目示例 2.1 項(xiàng)目概述

最近自己在寫一個(gè)todolist的項(xiàng)目，其中左側(cè)導(dǎo)航欄就大量應(yīng)用到了flex布局，這里就以這個(gè)為例，講一講flex布局的一些基本概念。

我們?cè)谌粘ｉ_發(fā)中，肯定也經(jīng)常會(huì)碰到這種需求，在一行中，不同的標(biāo)簽元素要水平垂直居中，且一個(gè)居左，一個(gè)居有，且標(biāo)簽元素內(nèi)的元素還要水平垂直居中。水平居中有時(shí)候到還好解決，垂直居中可能就難了。下面我們來看用flex布局怎么解決這些問題。
先來看html部分


    

      
        
         
          
         
        
      
      每日三件事
    

    

        3

我們想讓類名為list-today-title的div和類名為list-today-count的div在同一行顯示，并且讓他兩都在list-today的父容器里垂直水平居中。另外span.list-icon和span.list-name要在div.list-today.title中水平垂直居中。并且同行排列。
完整的css樣式如下(這里使用了scss)

    div.list-today{
        margin-bottom: 10px;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
         div.list-today-title{
           flex-grow: 10;
           display: flex;
           height: 40px;
           align-items: center;
           span.list-icon {
             width: 24px;
             height: 24px;
             i{
               font-size: 0;
             }
           }
           span.list-name {
             margin-left:10px;
           }
         }
        div.list-today-count{
          flex-grow: 1;
          display: flex;
          align-items: center;
        }
      }
2.2 flex

下面我們來分析一下上述的css。首先我們要先讓list-today-title和list-today-count實(shí)現(xiàn)水平和垂直居中。

div.list-today{
 display:flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: center;
 div.list-today-title{
  flex-grow:10
 }
 div.list-today-count{
  flex-grow:1 
 }
}

說明:
(1)display:flex : 使該元素成為flex容器，里面的子元素可以應(yīng)用各種flex功能。
(2)flex-direction: 定義主軸的方向
(3)justify-content:子元素在主軸方向的排布方式，這里的值是flex-start，表示從頭開始排布。
(4)align-items:子元素在側(cè)軸方向的排布方式，這里的值是center，表示子元素在側(cè)軸上居中。這里可以用來做垂直居中。
（5）flex-grow:表示當(dāng)父容器空間有多余的時(shí)候，子元素會(huì)拉伸的比例。
一圖勝千言，看過這張圖你就明白了。

2.3 總結(jié)

flex布局是一種比較新的布局方式，能很好的解決一些傳統(tǒng)布局中不好解決的問題，如子元素的垂直居中等。所以學(xué)會(huì)使用flex布局是非常有必要的。想詳細(xì)了解flex布局請(qǐng)點(diǎn)擊這里。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112161.html

相關(guān)文章

  • 初探uni-app框架 踩坑

    摘要：近些天有接觸到框架，使用軟件進(jìn)行編譯，能生成多端項(xiàng)目文件，如微信百度支付寶小程序及和端，記錄遇到的問題條件編譯我覺得比較突出的一點(diǎn)功能，就是這個(gè)條件編譯，指定對(duì)應(yīng)的代碼執(zhí)行在對(duì)應(yīng)的一端僅在某平臺(tái)存在除了某平臺(tái)均存在如只在微信小程序中才執(zhí)行 近些天有接觸到uni-app框架，使用HBuilderX軟件進(jìn)行編譯，能生成多端項(xiàng)目文件，如微信、百度、支付寶小程序及Android和ios端，記錄...

    neu 評(píng)論0 收藏0

  • 面試分享：一年經(jīng)驗(yàn)初探阿里巴巴前端社招

    摘要：三輪技術(shù)面上一輪發(fā)揮感覺沒前兩輪發(fā)揮好，所以還是有點(diǎn)不自信的，沒想到第三天后，就來電話了，通知我去阿里園區(qū)面試。 一般阿里社招都是招3-5年的P6+高級(jí)工程師，當(dāng)初自己一年經(jīng)驗(yàn)也沒有想過有這個(gè)面試機(jī)會(huì)。 雖然沒想著換工作，但是經(jīng)常關(guān)注一些招聘網(wǎng)站的信息，某一天，在某boss上有個(gè)人找我，叫我發(fā)一下簡(jiǎn)歷，我一看是阿里的某技術(shù)專家，雖然之前也有阿里的在某boss上給我要簡(jiǎn)歷，但是我深知自己...

    ACb0y 評(píng)論0 收藏0

  • 面試分享：一年經(jīng)驗(yàn)初探阿里巴巴前端社招

    摘要：三輪技術(shù)面上一輪發(fā)揮感覺沒前兩輪發(fā)揮好，所以還是有點(diǎn)不自信的，沒想到第三天后，就來電話了，通知我去阿里園區(qū)面試。 一般阿里社招都是招3-5年的P6+高級(jí)工程師，當(dāng)初自己一年經(jīng)驗(yàn)也沒有想過有這個(gè)面試機(jī)會(huì)。 雖然沒想著換工作，但是經(jīng)常關(guān)注一些招聘網(wǎng)站的信息，某一天，在某boss上有個(gè)人找我，叫我發(fā)一下簡(jiǎn)歷，我一看是阿里的某技術(shù)專家，雖然之前也有阿里的在某boss上給我要簡(jiǎn)歷，但是我深知自己...

    wuyumin 評(píng)論0 收藏0

  • 阿里云前端周刊 - 第 31 期

    摘要：發(fā)布按照官方發(fā)布計(jì)劃，的發(fā)布意味著進(jìn)入階段，徹底退出舞臺(tái)，的還有半年結(jié)束。為了應(yīng)對(duì)這個(gè)挑戰(zhàn)，美團(tuán)點(diǎn)評(píng)境外度假前端研發(fā)團(tuán)隊(duì)自年月起啟動(dòng)了面向端用戶的赫爾墨斯項(xiàng)目。前端技術(shù)越來越復(fù)雜，有不低的技術(shù)門檻。 推薦 1. 利用 Dawn 工程化工具實(shí)踐 MobX 數(shù)據(jù)流管理方案 https://zhuanlan.zhihu.com/p/... 項(xiàng)目在最初應(yīng)用 MobX 時(shí)，對(duì)較為復(fù)雜的多人協(xié)作項(xiàng)...

    madthumb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<