Flex布局（1）

2024-04-27 15:04:17

字體：大中小

來源：轉載

供稿：網友

文章轉載自阮一峰的《Flex布局教程：語法篇》鏈接地址

一、什么是Flex布局

任何塊級元素以及行級元素都可以定義為flex布局

div{ display: flex;}span{ display: inline-flex;}

Webkit內核的瀏覽器，必須加上-webkit前綴

.box{ display: -webkit-flex; /* Safari */ display: flex;}

設為Flex布局以后，子元素的float、clear和vertical-align屬性都會失效

二、基本概念

flex布局

看圖說話， - flex容器內的成員稱作項目，每一個項目所占水平位置的大小叫做main size，垂直方向上的大小叫做cross size - 整個flex容器有兩個軸線，水平方向的主軸線，垂直方向的交叉線 - 軸線的開始位置start和軸線的結束位置end

三、容器的屬性

1、flex-direction：決定主軸的方向（即項目的排列方向）

取值： - column-reverse：主軸為豎直方向，起點在下端 - column：主軸為豎直方向，起點在上端 - row：主軸為水平方向，起點在左端（默認值） - row-reverse：主軸為水平方向，起點在右端

分別對應下面的圖片 enter image description here

2、flex-wrap：默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

取值： - nowrap：不換行（默認） - wrap：換行，第一行在上方 - wrap-reverse：換行，第一行在下方

分別對應下面的圖片

（1）nowrap 默認不換行

（2）wrap enter image description here

（3）wrap-reverse enter image description here 3、flex-flow：該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

4、justify-content：屬性定義了項目在主軸上的對齊方式

取值：（這里假設主軸是從左到右） - flex-start ：從主軸的開始位置排列 - flex-end：從主軸結束的位置排列 - center：居中排列 - space-between：兩端對齊，項目之間的間隔都相等 - space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍

對應下面的圖示 enter image description here

5、align-items：定義項目（flex容器內的子元素）在交叉軸上如何對齊

取值：（這里假設主軸是從左到右） - flex-start ：從主軸的開始位置排列 - flex-end：從主軸結束的位置排列 - center：交叉軸的中點對齊 - baseline： 項目的第一行文字的基線對齊 - stretch：如果項目未設置高度或設為auto，將占滿整個容器的高度（默認值）

對應下面的圖示 enter image description here

6、align-content：定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用

取值：（這里假設主軸是從左到右） - flex-start ：與交叉軸的起點對齊 - flex-end：與交叉軸的終點對齊 - center：交叉軸的中點對齊 - space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布 - space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 - stretch：軸線占滿整個交叉軸（默認值）

對應下面的圖示

enter image description here