前言：因為做任務十涉及到flex布局，所以索性花了乙個上午的時間好好看了一遍。之前也看了，但是沒有做實戰練習，所以很多屬性還是很容易忘記。其實就是熟能生巧的事情啦。簡單總結一下：
一、容器的屬性：
①flex-direction:row|row-reverse|column|column-reverse
(專案排列方向：從左到右水平，從右到左水平，從上到下，從下到上)
②flex-wrap：nowrap|wrap|wrap-reverse
(專案換行：不換行【預設】，換行，第一行在下方的換行)
③flex-wrap：<flex-direction> |<flex-wrap>
(①和②的結合，row|nowrap**【預設】**)
④justify-content：flex-start|flex-end|center|space-between|space-around
(主軸對齊方式：左對齊，右對齊，居中，兩端對齊，兩端對齊且每個專案兩端間隔相等)
⑤align-items：flex-start|flex-end|center|baseline|stretch
(交叉軸對齊方式：起點對齊，終點對齊，中點對齊，基線對齊，佔滿)
align-content：flex-start|flex-end|center|space-between|space-around|stretch
(多根軸的對齊方式：略)
二、專案的屬性
①order：專案排列順序。預設為0（越大排的越後面）
②flex-grow：專案放大比例。預設為0（即不放大）
③flex-shrink：專案所需比例。預設為1（即空間不足就縮小）
④flex-basis：專案佔主軸的空間（長度）。預設為auto
.item
⑤flex：2，3，4的結合。預設為 0 1 auto
.item
flex：none（0 0 auto），flex：auto（1 1 auto）
⑥align-self:定義單個專案的對齊方式。
.item
幾個應用栗子：
一、百分比布局：
百分比布局title>
charset="utf-8">
type="text/css">
.grid
.grid-cell
.u-1of2
.u-1of3
.u-1of4
style>
head>
class="grid">
class="grid-cell u-1of3"
style="background-color: red">1/3div>
class="grid-cell"
style="background-color: green">autodiv>
class="grid-cell u-1of4"
style="background-color: red">
div>
div>
class="grid">
class="grid-cell u-1of3"
style="background-color: red">1/3div>
class="grid-cell"
style="background-color: green">autodiv>
class="grid-cell u-1of2"
style="background-color: red">
div>
div>
class="grid">
class="grid-cell"
style="background-color: red">autodiv>
class="grid-cell u-1of4"
style="background-color: green">1/4div>
class="grid-cell u-1of2"
style="background-color: red">1/2div>
div>
body>
html>
flex布局實戰3title>
charset="utf-8">
type="text/css">
.box
.column
/*設定圓點*/
.item
style>
head>
class="box">
class="column">
class="item">
span>
class="item">
span>
div>
class="column">
class="item">
span>
class="item">
span>
div>
div>
body>
html>
Flex布局 flex布局的詳細用法總結
tips 行內元素也可以使用 flex 布局 box 注意 flex 布局以後，子元素的float clear和vertical align屬性將失效 概念 採用 flex 布局的元素，稱為 flex 容器，簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案，簡稱 專案 六個屬性 1....
總結 Flex布局
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於 盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中 就不容易實現。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。bo...
flex 布局總結
flex 容器的屬性 flex direction 主軸方向 justify content 主軸上 item 的對齊方式 align items 交叉軸上 item 的對齊方式 align content 多根軸上的對齊方式，若只有一根軸，該屬性則不起作用 flex wrap 如何換行item 屬...