flex布局的學習

2021-08-20 19:24:59 字數 648 閱讀 5516

flex 是 2009 年,w3c 提出的一種新的布局適配方案,通過 flex布局,可以簡便、完整、響應式的實現各種頁面布局。經過這些年的發展,已經得到了所有瀏覽器的支援,基本上可以讓我們放心使用。 flex 布局是 flexiblebox 的縮寫,直譯過來就是 「彈性盒子」,它也是基於 「盒子」 模型,將 ui 切割成乙個乙個小的盒子,來進行 ui 布局。

display除了flex還有一些其他可選引數,例如:

flex:指定為 flex 布局,它可以在盒子內顯示子元素。

舉個例子,看一下效果圖:

在這裡,當不做特殊設定的時候,預設為display:block的狀態,其內的每乙個元素,都另起一行去展示。display:flex的話,我們就可以自由設定其內元素的布局形式

在父容器上,存在的屬性有:

css 裡就是有很多屬性是帶有 ***-reverse 引數的,大多數情況下我們也用不上。

flex布局學習

內容 flex 是 flexible box 的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。設為 flex 布局以後,子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素,稱為 flex 容器 flex...

flex布局學習

flex flexible box 是一種彈性布局,用於盒狀模型 任何一種容器都可以指定為flex布局 box注意 行內元素使用display flex 會變成塊級元素 行內元素可以使用inline flex進行flex布局 box注意 設定為flex布局之後,子元素的float clear和ver...

flex布局 Flex布局

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫,意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...