有關彈性盒子的那點事

2022-02-09 04:33:01 字數 1855 閱讀 6098

彈性盒子:

要點一、彈性盒子其實是由兩部分組成:彈性容器(flex container)和彈性子元素(flex item)。

彈性容器:通過設定display屬性的值為flexinline-flex將其定義為彈性容器。

彈性子元素:彈性容器內包含了乙個或多個彈性子元素。

要點二、彈性盒子的作用範圍:

彈性盒子只定義了彈性子元素如何在彈性容器內布局。

也就是說,彈性容器及彈性子元素

是正常渲染的。

要點三、1、

css 列(css columns)在彈性盒子中不起作用。

2、float,clearandvertical-align在flex專案中不起作用。

要點四、彈性盒子的屬性:

彈性盒子有以下幾個屬性:(我常用的為綠色)

1、display: flex | inline-flex; 2、flex-direction 3、flex-wrap 4、flex-flow 5、justify-content 6、align-items 7、align-content 8、flex-grow 9、flex-shrink 10、flex-basis 11、flex 12、align-self 。

下面,我們來依次介紹他們。   

display: flex | inline-flex; 

該屬性適用於彈性容器(寫在彈性容器裡)。

作用:定義乙個彈性容器

flex-direction:

該屬性適用於彈性容器(寫在彈性容器裡)。

作用:定義是------設定或檢索伸縮盒物件的子元素在父容器中的位置,即順序指定了彈性子元素在父容器中的位置。

值:row:

**:

<

style

>

#main

#main div

style

>

head

>

<

body

>

<

div

id="main"

>

<

div

style

="background-color:coral;"

>a

div>

<

div

style

="background-color:lightblue;"

>b

div>

<

div

style

="background-color:khaki;"

>c

div>

<

div

style

="background-color:pink;"

>d

div>

<

div

style

="background-color:lightgrey;"

>e

div>

<

div

style

="background-color:lightgreen;"

>f

div>

div>

效果:--------未完待續--------

有關String的那點事

1 string str1 abc system.out.println str1 abc 步驟 1 棧中開闢一塊空間存放引用str1 2 string池中開闢一塊空間,存放string常量 abc 3 引用str1指向池中string常量 abc 4 str1所指代的位址即常量 abc 所在位址,...

有關css居中 那點事

前言 怎麼說呢?我以前只知道margin 0 auto 從來沒想過會這麼高深,自從學習了慕課網,我才明白了原來css居中是有很多學問的。首先來說一下分類。分類指的是對什麼樣的元素來進行居中,不同的元素對應不同的方法。1.行內元素 2.定寬的 塊狀元素 定寬的,也就是加了width 100px 這種。...

有關多型的那點事丶

前奏 虛函式表 虛函式表是通過一塊連續記憶體來儲存虛函式的位址.這張表解決了繼承 虛函式 重寫 的問題 在有虛函式的物件例項中都存在一張虛 函式表,虛函式表就像一張地圖指 明了實際應該呼叫的虛函式函式 1.什麼是多型 所謂多型性就是不同物件收到相同的訊息時,產生不同的動作。直觀來說,多型性是指用乙個...