目錄2.justify-content:設定主軸上的子元素排列方式
這個屬性定義額專案在主軸上的對齊方式
3.flex-wrap:設定子元素是否換行
4.align-content:設定側軸上的子元素排列方式(多行)
5.align-items:設定側軸上的子元素排列方式(單行)
6.flex-flow:復合屬性,相當於同時設定了flex-direction和flex-wrap
子項常見屬性
flex是flexible box 的縮寫,意為"彈性布局",用來為盒子狀模型提供最大的靈活性,任何一容器都可以指定flex布局
當父元素是flex布局後, 子元素的float,clear,vertical-align失效
伸縮布局=彈性布局=伸縮盒布局=彈性盒布局=flex布局
採用flex布局的元素,成為flex容器,簡稱容器,他的所有子元素自動成為容器成員,成為flex專案,簡稱專案
子容器可以橫向和豎向排列
總結:通過給父元素新增flex布局屬性,來控制子盒子的位置和排列方式
預設主軸:x往右 ➡
預設側軸:y向下 ⬇
tips:使用這個屬性之前一定要先設定主軸(預設x➡)
預設情況下,專案都在一條(軸)線上,由flex-wrap屬性定義,flex布局中預設是不換行的
1.只能用於子項出現換行的情況(多行),在單行下是沒有效果的
1.align-items單行,只有上/下/居中和拉伸
2.align-content多行,可以設定上/下/居中/拉伸以及平均分配剩餘空間等
單行找align-items,多行找align-contentflex-flow: row wrap;
定義子專案分配剩餘空間,用flex來表示佔多少分數
允許單個專案有與其他不一樣的對齊方式,可覆蓋align-items屬性
預設值為auto,表示繼承父元素的align-items.如果沒有父元素,等同於stretch(拉伸)
數字越小,排列越前,預設為0
tips:和z-index不一樣
flex布局筆記
flex基本術語 display 定義乙個父容器，設定 display flex inline flex flex direction 設定主軸方向 預設橫軸 設定 row row reverse column column reverse flex wrap 設定容器子元素是否換行 預設不換行 設...
flex布局筆記
父容器配置display flex以後,就有一些flex布局專用的屬性可以設定了主要是以下幾個 1 flex direction 這個屬性決定了父容器中的子元素的排列方向,一共有四個屬性 column 從上到下 row 從左到右 column reverse 從下到上 row reverse 從右到...
Flex布局筆記
採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex 專案 flex item 簡稱 專案 總結flex布局原理 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex direction屬性值 屬...