desplay: flex;1. 自動換行
flex-wrap: wrap
1.橫向
justify-content:
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
2.縱向
align-items:
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
1.縱向:
(與align-items屬性作用相同)
align-self:
flex-start
flex-end
center
baseline
stretch;
2.橫向 (
1是單位是相對的比例)
flex-grow:
1;
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屬性值 屬...