初探flex布局

Jeffrrey 發布于2019-08-29 12:48 / 1324人閱讀

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

一 flex布局 1.1 flex概述

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

二項目示例 2.1 項目概述

最近自己在寫一個todolist的項目，其中左側導航欄就大量應用到了flex布局，這里就以這個為例，講一講flex布局的一些基本概念。

我們在日常開發中，肯定也經常會碰到這種需求，在一行中，不同的標簽元素要水平垂直居中，且一個居左，一個居有，且標簽元素內的元素還要水平垂直居中。水平居中有時候到還好解決，垂直居中可能就難了。下面我們來看用flex布局怎么解決這些問題。
先來看html部分

我們想讓類名為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實現水平和垂直居中。

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容器，里面的子元素可以應用各種flex功能。
(2)flex-direction: 定義主軸的方向
(3)justify-content:子元素在主軸方向的排布方式，這里的值是flex-start，表示從頭開始排布。
(4)align-items:子元素在側軸方向的排布方式，這里的值是center，表示子元素在側軸上居中。這里可以用來做垂直居中。
（5）flex-grow:表示當父容器空間有多余的時候，子元素會拉伸的比例。
一圖勝千言，看過這張圖你就明白了。

2.3 總結

flex布局是一種比較新的布局方式，能很好的解決一些傳統布局中不好解決的問題，如子元素的垂直居中等。所以學會使用flex布局是非常有必要的。想詳細了解flex布局請點擊這里。

云服務器 GPU云服務器 flex布局初探webrtc webrtc技術初探初探騰訊云存儲網關

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112161.html

初探uni-app框架踩坑

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

neu 2019-08-26 10:15 評論0 收藏0
面試分享：一年經驗初探阿里巴巴前端社招

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

ACb0y 2019-08-21 11:49 評論0 收藏0
面試分享：一年經驗初探阿里巴巴前端社招

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

wuyumin 2019-08-29 13:07 評論0 收藏0
阿里云前端周刊 - 第 31 期

摘要：發布按照官方發布計劃，的發布意味著進入階段，徹底退出舞臺，的還有半年結束。為了應對這個挑戰，美團點評境外度假前端研發團隊自年月起啟動了面向端用戶的赫爾墨斯項目。前端技術越來越復雜，有不低的技術門檻。推薦 1. 利用 Dawn 工程化工具實踐 MobX 數據流管理方案 https://zhuanlan.zhihu.com/p/... 項目在最初應用 MobX 時，對較為復雜的多人協作項...

madthumb 2019-08-21 17:27 評論0 收藏0