常用的布局方式之 Flex 布局

Mertens 發布于2019-08-30 11:09 / 1038人閱讀

摘要：常用的布局方式之布局一布局介紹人們已經慢慢放棄了低版本瀏覽器，所以布局是現在首選的布局方式。使用了屬性的標簽，我們稱之為容器，它的所有子元素自動成為容器成員，我們稱之為項目。屬性用來控制項目在側軸的對齊方式。是和的簡寫形式。

常用的布局方式之 Flex 布局 一、 Flex布局介紹

人們已經慢慢放棄了低版本瀏覽器，所以 flex 布局是現在首選的布局方式。 flex 布局又稱之為 彈性布局 ，任何一個標簽都可以使用 flex 布局，

行內元素也可以使用 flex 布局，當時標簽使用了 flex 布局以后，那么子元素的 float 、clear 等屬性都將失效。

.box{
  display: flex;
}

使用了 display: flex 屬性的標簽，我們稱之為容器，它的所有子元素自動成為容器成員，我們稱之為項目。

容器默認有兩個軸，主軸(默認為水平)和側軸(默認為側軸)，項目默認沿主軸排列。

二、容器的屬性

容器常用的屬性有六個。

flex-direction          // 控制主軸方向
justify-content         // 設置主軸方向對齊方式
align-items             // 控制側軸方向對齊方式
align-content           // 當側軸內容多行時，設置側軸對齊方式
flex-wrap               // 控制項目是否允許換行
flex-flow               // 是flex-direction 和 flex-wrap 的簡寫

如果沒有特殊說明，以下代碼演示模板一律如下。


  1
  2
  3

2.1 flex-direction

flex-direction 決定主軸的方向，也就是項目的排列方向。

.box{
  flex-direction: row;
}

.box{
  flex-direction: row-reverse;
}

.box{
  flex-direction: column;
}

.box{
  flex-direction: column-reverse;
}

2.2 justify-content

justify-content 用來控制項目在主軸的對齊方式。

.box{
  justify-content: flex-start;
}

.box{
  justify-content: flex-end;
}

.box{
  justify-content: center;
}

.box{
  justify-content: space-around;
}

.box{
  justify-content: space-between;
}

.box{
  justify-content: space-evenly;
}

2.3 flex-wrap

容器的 flex-wrap 屬性用來控制項目是否允許換行。

.box{
  flex-wrap: wrap;
}

.box{
  flex-wrap: wrap-reverse;
}

2.4 align-items

align-items屬性用來控制項目在側軸的對齊方式。

.box{
  align-items: flex-start;
}

.box{
  align-items: flex-end;
}

.box{
  align-items: center;
}

2.5 align-content

當側軸有多行時，可以使用 align-content 來設置側軸的對齊方式。

.box{
  align-items: flex-end;
}

.box{
  align-items: center;
}

.box{
  align-items: sapce-between;
}

.box{
  align-items: sapce-around;
}

2.6 flex-flow

flex-flow 是flex-direction和flex-wrap的簡寫形式。

.box{
  flex-flow: row nowrap;
}

.box{
  flex-flow: row wrap;
}

.box{
  flex-flow: column wrap;
}

.box{
  flex-flow: column nowrap;
}

三、項目的屬性

項目的常用屬性有三個。

order          // 項目的排列順序
align-self     // 項目在側軸的對齊方式
flex           // flex-grow, flex-shrink 和 flex-basis的簡寫

3.1 order

order 屬性是控制項目的排列順序，默認值是 0，數值越小排列越靠前，可以有負數。

3.2 align-self

align-self 是控制當前項目的側軸的對齊方式，可以覆蓋 align-items 屬性。


  1
  2
  3

3.3 flex

項目使用的屬性 flex 其實是 flex-grow(放大), flex-shrink(縮小) 和 flex-basis的簡寫，默認值是 0 1 auto。
我們通常設置的 flex：1，其實等價于 flex-grow: 1，也就是占有剩余空間的寬度。


  1
  2
  3

有時候，我們也會設置 flex: 33.333%，容器整個寬度就是100%，每個項目占33.333%，所以就是一行展示三個。

四、利用 flex 制骰子布局 4.1 一個點

4.2 兩個點

4.3 三個點

4.4 四個點

4.5 五個點

4.6 六個點

本文參考了阮一峰大神的 http://www.ruanyifeng.com/blo... 。

GPU云服務器云服務器 flex布局 android常用布局 android布局方式 html的布局

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

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

等高布局常用幾種方式

摘要：等高布局的方式指在同一個父容器中子元素高度相等的布局從等高布局實現方式來說又分為兩類偽等高子元素高度差依然存在只是視覺上給人感覺就是等高真等高子元素高度相等先來看看偽等高實現方式通過負和實現真等高實現方式偽等高之負和主要利用負來實現具體負等高布局的方式指在同一個父容器中,子元素高度相等的布局. 從等高布局實現方式來說,又分為兩類偽等高子元素高度差依然存在,只是視覺上給人感覺就是...

Allen 2019-08-30 11:02 評論0 收藏0
等高布局常用幾種方式

摘要：等高布局的方式指在同一個父容器中子元素高度相等的布局從等高布局實現方式來說又分為兩類偽等高子元素高度差依然存在只是視覺上給人感覺就是等高真等高子元素高度相等先來看看偽等高實現方式通過負和實現真等高實現方式偽等高之負和主要利用負來實現具體負等高布局的方式指在同一個父容器中,子元素高度相等的布局. 從等高布局實現方式來說,又分為兩類偽等高子元素高度差依然存在,只是視覺上給人感覺就是...

ymyang 2019-08-23 17:54 評論0 收藏0
快應用采坑與flex布局講解

摘要：下面介紹有關的一些常用基本屬性是定義主軸的方向，常用的有，。就直接講一個稍微難一點的例子如果需要實現上面的情況，那么代碼如下更多的就需要自己去探索，這里就不一一講解了。快應用之flex布局在我們常用的布局中有display + position + float進行布局，但是這些布局或多或少都有些麻煩（雖然我最喜歡用position,哈哈啥都能干)。但是由于快應用只能夠使用flex布...

chnmagnus 2019-08-22 18:27 評論0 收藏0
CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...

includecmath 2019-08-29 12:17 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0