flex布局解說和屬性

2022-03-17 02:44:36 字數 1041 閱讀 6272

1. flex-direction 規定當前div下面的子元素是橫向布局還是縱向布局

row預設值,橫向布局相當於float:left

column

縱向,相當於div預設的垂直方向

2.justify-conten 主軸居左,居中,居右(這跟flex-direction的對齊方式改變而改變,沒有固定的橫向和縱向)

flex-start

模組居左邊

flex-end

模組居右邊

center

模組居中(相當於margin:0 auto)

space-between

模組兩端對齊

3.align-items 側軸居上,居中,居下(這跟flex-direction的對齊方式改變而改變,沒有固定的橫向和縱向)

flex-start

模組垂直居上

center

模組垂直居中(line-height:50px)

flex-end

模組垂直居下

4.flex-wrap flex容器是單行或者多行,同時橫軸的方向決定了新行堆疊的方向

nowrap

預設值,所有模組一行展示

wrap

根據div的寬度,下面的模組自動是多行還是一行橫向排版

5.flex-shrink處理文字溢位

number

乙個數字,規定專案將相對於其他靈活的專案進行收縮的量。預設值是 1。

6:align-self 屬性定義flex子項單獨在側軸(縱軸)方向上的對齊方式。

auto

預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。

baseline

元素位於容器的基線上。

如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。

center

元素位於容器的中心。

彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸,則會向兩個方向溢位相同的長度)。

paste deploy 解說和使用

pip install pastedeploy既然pastedeploy是用來配置和管理wsgi 應用的,不妨首先看一下pastedeploy配置檔案的格式。pastedeploy配置檔案由若干section組成,section的宣告格式如下 每個section中具體配置項的格式就是基本的ini格式...

flex布局的屬性

flex布局的核心概念是軸和容器,容器包括外層的父容器和內層的子容器,軸包括主軸 預設水平 和交叉軸 預設垂直 一 開啟flex布局 父容器設定屬性值 display flex 若父容器為行內元素 display inline flex webkit核心的瀏覽器 display webkit fle...

Flex 布局 容器屬性

flex 布局,意為 彈性布局 任何乙個容器都可以指定為 flex 布局,行內元素也可以使用 flex 布局。注意 設為 flex 布局後,子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素,稱為 flex 容器,簡稱容器 它的所有子元素自...