Flexbox Guide

stefanieliang 發布于2019-08-29 17:02 / 3577人閱讀

摘要：模型，通常被稱為，是一種一維的布局模型。它將基于行或列控制布局，但不能同時控制布局。的主要目標是允許項目填充其容器提供的整個空間，具體取決于您設置的一些規則。那么超出的需要被消化通過收縮因子，所以加權綜合可得。

Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。

基本介紹

瀏覽器兼容性

啟用Flexbox

容器屬性

行||列對齊 ==row and columns==

水平||垂直對齊 ==Vertical and horizontal==

更改水平對齊 ==change horizontal alignment==

更改垂直對齊 ==change vertical alignment==

關于基準線 ==about baseline==

換行 ==wrap==

flex元素上的屬性

order

align-self

flex-grow

flex-shrink

flex-basis

flex

介紹

Flexbox，也稱為靈活盒模塊，是兩個現代布局系統之一，還有CSS Grid。與CSS Grid（二維）相比，flexbox是一維布局模型。它將基于行或列控制布局，但不能同時控制布局。flexbox的主要目標是允許項目填充其容器提供的整個空間，具體取決于您設置的一些規則。Flexbox不兼容IE10以下，IE10以下可以使用如下方式：

Table layouts

Floats

clearfix hacks

display: table hacks

兼容性

IE10以下不兼容，一些瀏覽器需要使用-webkit或者display:-webkit-box兼容處理。

使用flexbox

display:flexbox

或者

display:inline-flexbox

容器屬性

flex-direction

justify-content

align-items

flex-wrap

flex-flow

行對齊或者列對齊

flex-direction決定容器以行對齊還是列對齊。

flex-direction:row，行對齊，從左到右

flex-direction:row-reverse，行對齊，從右到左

flex-direction:column，列對齊，從上到下

flex-direction:column-reverse，列對齊，從下到上

如下圖所示：

水平對齊或者垂直對齊

flex-direction默認是row，從左向右，當其屬性值為column時，是從上到下，可以使用justify-content和align-items改變水平和垂直對齊。

改變水平對齊方式

justify-content有5個屬性值：

flex-start 左對齊

flex-end 右對齊

center 居中對齊

space-between 首尾對齊容器左右側，中間間距相等

space-around 每個元素的間距相等

改變垂直對齊方式

align-items有5個屬性值：

flex-start 頂部對齊

flex-end 底部對齊

center 居中對齊

baseline 基線對齊

stretch 拉伸以適應容器

關于align-items:baseline，可以看看codepen：https://codepen.io/flaviocopes/pen/oExoJR

換行

默認情況下，flexbox容器中的項目保留在一行中，縮小它們以適合容器。

可以使用flex-wrap:wrap或者flex-wrap:wrap-reverse對容器中的元素進行換行處理。

一種簡寫方式：flex-flow:row wrap;即flex-direction:row && flex-wrap:wrap

適用于flexbox容器內每個元素的屬性

order

align-self

flex-grow

flex-shrink

flex-basis

flex

order-改變元素的順序，如下圖所示，可以指定某個元素的order值，以改變其位置，默認值為0

align-self-元素使用align-self覆蓋容器的align-items對當前元素的對齊方式

flex-grow || flex-shrink 如有必要，可以增加或縮小某個元素

flex-grow：默認值為0，當某個元素flex-grow為1，另一個為2，則為flex-grow：2的元素占用flex-grow:1的空間的2倍。

flex-shrink：默認值為1，如果沒有顯示定義該屬性，將會自動按照默認值1在所有因子相加之后計算比率來進行空間收縮。

比如：有這么一個容器，div>.box13+.box22父容器定義寬度為500px，子元素定義寬度為120px，box1的flex-shrink為1，.box2的flex-shrink為2，那么子項相加之后即為 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化通過收縮因子，所以加權綜合可得 1001+1001+1001+1002+100*2=700px。

于是我們可以計算 A、B、C、D、E 將被移除的溢出量是多少：
A 被移除溢出量：(100*1/700)*100，即約等于14px
B 被移除溢出量：(100*1/700)*100，即約等于14px
C 被移除溢出量：(100*1/700)*100，即約等于14px
D 被移除溢出量：(100*2/700)*100，即約等于28px
E 被移除溢出量：(100*2/700)*100，即約等于28px

最后A、B、C、D、E的實際寬度分別為：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px

flex-basis-用于設置或檢索彈性盒伸縮基準值，默認值為auto，其與width的區別可以參考這篇文章：https://www.jianshu.com/p/17b... flex：有三個屬性值

flex-grow

flex-shrink

flex-basis

flex: 0 1 auto
分別對應flex-grow、flex-shrink、flex-basis

結尾

友情獻上小游戲，通過游戲學習flexbox

http://flexboxfroggy.com/#zh-cn

云服務器 GPU云服務器 Guide flexbox style-guide FlexBox詳解

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

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

CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
朝花夕拾：CSS居中完全指南

摘要：正文居中是常被開發者抱怨的問題之一。注意你不能將浮動元素居中。水平且垂直居中你可以將前面的方法任意組合起來，實現完美的居中效果。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。參考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果沒有接...

laznrbfe 2019-08-29 13:45 評論0 收藏0
CSS 居中完全指南

摘要：在文本前面插入一個高度為百分百的偽元素，讓文本與其垂直對齊。塊級元素或者使用垂直水平居中或者使用翻譯自 https://css-tricks.com/centering-css-complete-guide/ 預先給出這樣的樣式 .container { width: 100%; height: 200px; background-color: azur...

hqman 2019-08-30 13:03 評論0 收藏0
flexbox：更加優雅的Web布局

摘要：它用來可以處理更加復雜的布局。在容器下的子元素的寬度和比容器和小的時候起作用。按照的值減去相應大小得到子元素的值。實例截圖實例查看用于當前行中的子元素進行對齊布局。子元素拉伸至充滿容器。優雅的實現響應式布局。 showImg(http://i2.tietuku.com/fd0ddd6dbd15e380.jpg); flexbox layout是W3C為了更好的在網頁中排版和布局而設計...

mdluo 2019-08-28 18:08 評論0 收藏0
Flexbox完全指南（譯）

摘要：本文譯自這里，針對本文介紹的屬性列個提綱伸縮容器屬性伸縮項目屬性以后再布局時可以考慮用啦背景布局模塊目前上一次工作草案的叫法旨在提供一種更高效的方式來布局排列及分配容器中項目的空間，即便容器大小是未知或動態變化的因此稱為。本文譯自 A Complete Guide to Flexbox這里，針對本文介紹的屬性列個提綱：伸縮容器屬性： display flex-direction...

pekonchan 2019-08-30 13:09 評論0 收藏0