flex與inline flex屬性的使用詳解

2021-09-26 16:38:37 字數 706 閱讀 8991

這篇文章主要介紹了flex與inline-flex的一些差別,感興趣的朋友們可以看一下。

flex:將物件作為彈性伸縮盒顯示

inline-flex:將物件作為內聯彈性伸縮盒顯示

先來看flex:

.contain

.box

那麼結果是什麼那?

我們可以看到設定flex後,父元素仍然是乙個塊級元素。那麼如果父元素的寬小於子元素的寬度之和那?

.contain

.box

.box2

我們來看一下結果

即使我們設定的子元素的寬度之和超過了父元素的寬度,子元素仍然沒有溢位父元素,父元素的寬度仍然是設定的400px,這就是flex的作用,使子元素能夠在父元素裡彈性的伸縮。

注意不是均分,可以看到,第二個div是其他三個div寬度的二倍。

在子元素的寬度之和大於父元素的情況下,使用彈性布局時,該子元素的實際寬度是(設定的該子元素的寬度/設定的子元素寬度之和)*父元素的寬度。

那麼inline-flex又有什麼不同那?

讓我們回到第乙個**塊,把flex改為inline-flex

結果是:

可以看到,與flex的不同是,inline-flex類似於行內元素,但與行內元素不同的是,他可以設定寬度,並且子元素寬度之和大於父元素時,與flex結果相同。

flex 增長與收縮

flex auto 將增長值與收縮值設定為1,基本大小為 auto flex none.將增長值與收縮值設定為0,基本大小為 auto 也就是固定大小。增長 基本大小 額外空間 增長係數 增長係數總和 按比例劃分額外空間,然後各自分配。縮小 基本大小 溢位大小 縮小係數 基本大小 各各縮小係數 自身...

flex入門之Flex與Flash的關係

flex 入門之flex與 flash 的關係 首先這裡想說的是,flash 並非只是乙個單純的向量動畫創作工具,而是乙個憑藉指令碼語言 actionscript 在功能和定位上不斷演變的網路應用開發工具。早在 flashmx 的時候就已經成為 macroemdia 推廣ria 戰略的工具。但是畢竟...

FLEX與C 互動概要

準備工作 flex方面 1 開啟index.template.html,並在js指令碼裡填入方法 c 方面 1 在winform中插入webbrowser控制項,命名為wb 2 在建構函式中寫 wb.objectforscripting this 3 在類上做元資料標籤 comvisible tru...