首頁(yè)技術(shù)文章正文

flex布局有哪些常見(jiàn)父項(xiàng)屬性?

更新時(shí)間:2021-09-14 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

flex 彈性布局操作方便、布局極為簡(jiǎn)單,所以在適合移動(dòng)端WEB應(yīng)用。flex 是 flexible Box 的縮寫,意為"彈性布局",用來(lái)為盒狀模型提供最大的靈活性,任何一個(gè)容器都可以指定為 flex 布局。flex布局父項(xiàng)常見(jiàn)屬性有以下七種,掌握它們可以使你在后續(xù)的學(xué)習(xí)和開(kāi)發(fā)中十分必要。

1. 常見(jiàn)父項(xiàng)屬性
以下由6個(gè)屬性是對(duì)父元素設(shè)置的

flex-direction:設(shè)置主軸的方向

justify-content:設(shè)置主軸上的子元素排列方式

flex-wrap:設(shè)置子元素是否換行 ? align-content:設(shè)置側(cè)軸上的子元素的排列方式(多行)

align-items:設(shè)置側(cè)軸上的子元素排列方式(單行)

flex-flow:復(fù)合屬性,相當(dāng)于同時(shí)設(shè)置了 flex-direction 和 flex-wrapflex 彈性布局操作方便、布局極為簡(jiǎn)單,所以在適合移動(dòng)端WEB應(yīng)用。flex 是 flexible Box 的縮寫,意為"彈性布局",用來(lái)為盒狀模型提供最大的靈活性,任何一個(gè)容器都可以指定為 flex 布局。flex布局父項(xiàng)常見(jiàn)屬性有以下七種,掌握它們可以使你在后續(xù)的學(xué)習(xí)和開(kāi)發(fā)中十分必要。

2.flex-direction 設(shè)置主軸的方向
①主軸與側(cè)軸

在 flex 布局中,是分為主軸和側(cè)軸兩個(gè)方向,同樣的叫法有 : 行和列、x 軸和y 軸
默認(rèn)主軸方向就是 x 軸方向,水平向右

默認(rèn)側(cè)軸方向就是 y 軸方向,水平向下

flex布局父項(xiàng)常見(jiàn)屬性

②屬性值
flex-direction 屬性決定主軸的方向(即項(xiàng)目的排列方向)

注意: 主軸和側(cè)軸是會(huì)變化的,就看 flex-direction 設(shè)置誰(shuí)為主軸,剩下的就是側(cè)軸。而我們的子元素是跟著主軸來(lái)排列的

flex布局父項(xiàng)常見(jiàn)屬性


3.justify-content 設(shè)置主軸上的子元素排列方式

justify-content 屬性定義了項(xiàng)目在主軸上的對(duì)齊方式,注意: 使用這個(gè)屬性之前一定要確定好主軸是哪個(gè)

flex布局常見(jiàn)父項(xiàng)屬性


4.flex-wrap 設(shè)置子元素是否換行
默認(rèn)情況下,項(xiàng)目都排在一條線(又稱”軸線”)上。flex-wrap屬性定義,flex布局中默認(rèn)是不換行的。

flex布局常見(jiàn)父項(xiàng)屬性


5.align-items 設(shè)置側(cè)軸上的子元素排列方式(單行 )
該屬性是控制子項(xiàng)在側(cè)軸(默認(rèn)是y軸)上的排列方式 在子項(xiàng)為單項(xiàng)(單行)的時(shí)候使用

flex布局常見(jiàn)父項(xiàng)屬性


6.align-content 設(shè)置側(cè)軸上的子元素的排列方式(多行)
設(shè)置子項(xiàng)在側(cè)軸上的排列方式 并且只能用于子項(xiàng)出現(xiàn) 換行 的情況(多行),在單行下是沒(méi)有效果的。

flex布局常見(jiàn)父項(xiàng)屬性

align-content 和 align-items 區(qū)別

align-items 適用于單行情況下, 只有上對(duì)齊、下對(duì)齊、居中和 拉伸

①align-content 適應(yīng)于換行(多行)的情況下(單行情況下無(wú)效), 可以設(shè)置 上對(duì)齊、 下對(duì)齊、居中、拉伸以及平均分

配剩余空間等屬性值。

②總結(jié)就是單行找 align-items 多行找 align-content

flex布局常見(jiàn)父項(xiàng)屬性

7.flex-flow
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性

flex-flow:row wrap;
  • flex-direction:設(shè)置主軸的方向

  • justify-content:設(shè)置主軸上的子元素排列方式

  • flex-wrap:設(shè)置子元素是否換行 ? align-content:設(shè)置側(cè)軸上的子元素的排列方式(多行)

  • align-items:設(shè)置側(cè)軸上的子元素排列方式(單行)

  • flex-flow:復(fù)合屬性,相當(dāng)于同時(shí)設(shè)置了 flex-direction 和 flex-wrap






猜你喜歡:

flex布局原理是什么?有哪些常見(jiàn)子項(xiàng)屬性?

BorderLayout邊界布局管理器的聚居效果是怎樣的?

什么是網(wǎng)頁(yè)布局?DIV+CSS技術(shù)的布局流程是怎樣的?

布局視口、視覺(jué)視口和理想視口分別是什么?

黑馬程序員前端與移動(dòng)開(kāi)發(fā)課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!