flex布局的屬性及其應用

2021-10-07 21:11:53 字數 760 閱讀 9502

flex布局也叫彈性布局作為前端開發中最常用布局之一,它都有那些屬性,有哪些特點,讓我們來了解一下。

1.操作方便,布局簡單,移動端使用比較廣泛

2.pc端支援情況較差

3.ie低版本不支援flex

以前要想把li標籤在一行顯示時,要給li加浮動,新增浮動後可能會對下面的內容產生影響(很麻煩)。 當我們學習了flex布局以後就會發現,原來要想讓li在一行顯示,並不影響其他元素是這樣的******ness在flex布局中也有x和y軸

row預設值從左到右

row-reverse

從右到左

column

從上到下

column-reverse

從下到上

當我們要是用flex布局時,要現在元素的父級新增display:flex屬性才可可以使用在使用這個屬性之前一定要先確認好主軸方向

flex-start

預設值 從頭部開始 如果主軸是x軸,則從左到右

flex-end

從尾部開始排列

center

在主軸居中對齊

space-around

平分剩餘空間

space-between

先兩邊貼邊 再平分剩餘空間

flex布局的屬性

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

flex布局應用

所謂道生 一 一生 二 二生 三 三生萬物。由flex的基本屬性jiflex除了可以實現多個盒子自適應螢幕寬度以外,還可以處理某一行或一列的布局,如在一行上讓元素兩端對齊flex兩端對齊,千里之行始於足下,想要了解flex基本的屬性,請閱flex自適應布局。1 一對多布局 一行對齊多列或者一列對多行...

flex布局應用

flex介紹 了解了flex布局之後,發現其功能非常強大.當指定乙個div display flex之後,裡面的子元素會按flex布局.常用的冊格,各種經典網頁布局,如上左右下,還有一些難搞的css,如內容不佔滿整頁時,footer會上移,而不是在頁面底部等等.這些情況下使用flex可以輕鬆簡潔的實...