flex布局 彈性盒子

2021-09-11 21:57:32 字數 663 閱讀 6394

1. display: flex/inline-flex;     子元素的float、clear和vertical-align屬性將失效。

flex-direction :  主軸的方向即專案排列方向    預設row

flex-wrap: 軸線排不下,如何換行

flex-flow:預設值為row nowrap

justify-content:主軸上的對齊方式

align-items:在交叉軸上如何對齊

align-content:多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用

2. order:專案的排列順序

flex-grow:專案的放大比例,預設為0;即如果存在剩餘空間,也不放大。

flex-shrink:專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。

flex-basis:分配多餘空間之前,專案佔據的主軸空間,預設值為auto,即專案的本來大小   360px固定寬度

flex:預設值為0 1 auto。後兩個屬性可選; 快捷值:auto (1 1 auto) 和 none (0 0 auto)。

align-self:單個專案有與其他專案不一樣的對齊方式(交叉軸) 覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch

彈性盒子布局 flex布局

彈性盒子布局方式 box 設為flex布局後,子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素,稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為 flex 專案 flex item 簡稱 專案 容器...

flex彈性盒子,,彈性盒子布局

flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...

Flex布局(CSS彈性盒子)

css3彈性盒子 flexible box或flexbox 是一種用於在頁面上布置元素的布局模式,使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時,元素可 地執行。對於許多應用程式,彈性盒子模型提供了對塊模型的改進,因為它不使用浮動,flex容器的邊緣也不會與其內容的邊緣摺疊。摘自mdn 使用...