當(dāng)前位置：首頁(yè) > news >正文

模板網(wǎng)站怎么做優(yōu)化谷歌官方網(wǎng)站注冊(cè)

news 2025/7/12 12:11:01

模板網(wǎng)站怎么做優(yōu)化,谷歌官方網(wǎng)站注冊(cè),WordPress推送到微信,做網(wǎng)站需要學(xué)會(huì)些什么CSS:Flexible Box彈性盒子布局一、flex布局原理 ? flex是flexible Box的縮寫(xiě),意為 ”彈性布局“，用來(lái)為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為flex布局。當(dāng)我們的父盒子設(shè)置為flex布局之后，子元素的 float 、clear 和 vert…

CSS:Flexible Box彈性盒子布局

一、flex布局原理

? flex是flexible Box的縮寫(xiě),意為 ”彈性布局“，用來(lái)為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為flex布局。

當(dāng)我們的父盒子設(shè)置為flex布局之后，子元素的 float 、clear 和 vertical-align 屬性將會(huì)失效。

伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 = flex布局

  采用了 Flex布局的元素，稱(chēng)為 **Flex容器**（flex container），簡(jiǎn)稱(chēng) ”容器“。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為**Flex項(xiàng)目**（flex item），簡(jiǎn)稱(chēng)”項(xiàng)目“。

在這里插入圖片描述

? **flex布局原理：**通過(guò)給父盒子添加 flex 屬性，來(lái)控制子盒子的位置和排列方式。

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

2.1 常見(jiàn)父項(xiàng)屬性

以下由6個(gè)屬性是對(duì)父元素設(shè)置的

flex-direction：設(shè)置主軸的方向
jusify-content：設(shè)置主軸上的子元素排列方式
flex-wrap：設(shè)置子元素是否換行
align-content: 設(shè)置側(cè)軸上的子元素的排列方式(多行)
align-items：設(shè)置側(cè)軸上的子元素排列方式(單行)
flex-flow: 復(fù)合屬性，相當(dāng)于同時(shí)設(shè)置了flex-direction 和 flex-wrap

2.2 flex-direction 屬性

2.2.1主軸與側(cè)軸

? 在flex布局中，是分為主軸和側(cè)軸兩個(gè)方向，同樣的叫法有：行和列、x軸和y軸

默認(rèn)主軸方向就是x軸反向，水平向右
默認(rèn)側(cè)軸方向就是y軸方向，水平向下

2.2.2 屬性值

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

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

屬性值	說(shuō)明
row	默認(rèn)值從左到右
row-reverse	從右到左
column	從上到下
column-reverse	從下到上

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>flex布局</title></head><body><div><span>1</span><span>2</span><span>3</span></div></body>
</html><style>div{width: 800px;height: 300px;background-color: pink;/* 給父級(jí)添加flex屬性 */display: flex;/* 默認(rèn)的主軸是x軸 row  y軸就是側(cè)軸了 元素是跟著主軸來(lái)排列的 *//* flex-direction: row-reverse; *//* 將主軸設(shè)置為y軸,那么x軸就變?yōu)閭?cè)軸,元素是跟著主軸來(lái)排列的 */flex-direction: column;}div span{width: 150px;height: 100px;background-color: purple;}
</style>

界面展示效果：在這里插入圖片描述

2.3 justify-content 屬性

? justify-content屬性是設(shè)置主軸上的子元素對(duì)齊方式，定義了項(xiàng)目在主軸上的對(duì)齊方式

注意：使用這個(gè)屬性之前一定要確定號(hào)主軸是x軸還是y軸。

屬性值	說(shuō)明
flex-start	默認(rèn)值從頭部開(kāi)始，如果主軸是x軸，則從左到右
flex-end	從尾部開(kāi)始排列
center	在著有劇中對(duì)齊（如果主軸是x軸則水平居中）
space-around	平均分剩余空間（左邊空間+右邊空間的方式）
space-between	先兩邊貼邊在分剩余空間（重要）

2.4 flex-wrap屬性

? 當(dāng)下面這種情況出現(xiàn)時(shí)：父容器的長(zhǎng)度在主軸上無(wú)法全部容下所有的項(xiàng)目時(shí)，子元素（項(xiàng)目）的主軸大小會(huì)被無(wú)線(xiàn)的縮小，子項(xiàng)目不會(huì)自動(dòng)進(jìn)行換行。就需要通過(guò) flex-wrap屬性來(lái)處理?yè)Q行操作。

<body><div><span>1</span><span>2</span><span>3</span><!-- <span>4</span> --></div></body><style>div{width: 600px;height: 400px;background-color: pink;display: flex;  //父容器flex布局flex-direction: row;  //主軸方向}div span{width: 150px;height: 100px;background-color: purple;color: aliceblue;margin: 10px; //外邊距}</style>

? 當(dāng)添加多個(gè) <span> </span> 標(biāo)簽時(shí)，子項(xiàng)目在主軸上的寬度會(huì)被無(wú)線(xiàn)收縮，而不會(huì)自動(dòng)換行。

在這里插入圖片描述

? flex-wrap設(shè)置子元素是否換行，flex布局中的子元素是默認(rèn)不換行，項(xiàng)目都排在一條線(xiàn)（又稱(chēng)為”軸線(xiàn)“）上，如果裝不開(kāi)，會(huì)縮小子元素的主軸上的大小。

屬性值	說(shuō)明
nowrap	默認(rèn)值，不換行
wrap	換行

<body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div></body><style>div{width: 600px;height: 400px;background-color: pink;display: flex;  /* //父容器flex布局 */flex-direction: row;  /* //主軸方向 *//* justify-content:space-around; */flex-wrap: wrap;}div span{width: 150px;height: 100px;background-color: purple;color: aliceblue;margin: 10px; //外邊距}</style>

換行后的效果：在這里插入圖片描述

2.5 align-items屬性

? 設(shè)置側(cè)軸上的子元素排列方式（單行）

? 該屬性是控制子項(xiàng)在側(cè)軸（默認(rèn)是y軸）上的排列方式，在子項(xiàng)為單項(xiàng)的時(shí)候使用

屬性值	說(shuō)明
flex-start	默認(rèn)值從上到下
flex-end	從下到上
center	擠在一起居中（垂直居中）
stretch	拉伸（子項(xiàng)目沒(méi)有設(shè)置高度的情況）

<body><div><span>1</span><span>2</span><span>3</span></div>
</body>
<style>div{width: 600px;height: 400px;background-color: pink;display: flex;  /* 父容器flex布局 */flex-direction: row;  /* //主軸方向x */justify-content: center;align-items: center;}div span{width: 150px;height: 100px;background-color: purple;color: aliceblue;margin: 10px; //外邊距}
</style>

在這里插入圖片描述

2.6 align-content屬性

? 設(shè)置軸上的子元素的排列方式（多行），設(shè)置子項(xiàng)目在側(cè)軸上的排列方式，并且只能用于子項(xiàng)目出現(xiàn)了換行的情況（多行）。在單行下沒(méi)有效果！

屬性值	說(shuō)明
flex-start	默認(rèn)值，從側(cè)軸的頭部開(kāi)始排列
flex-end	從側(cè)軸的尾部開(kāi)始排列
center	在側(cè)軸的中間顯示
space-around	子項(xiàng)在側(cè)軸平分剩余空間
space-between	子項(xiàng)在側(cè)軸上先分布到兩頭，在平凡甚于空間
stretch	設(shè)置子元素高度平分父元素高度

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

align-items適應(yīng)單行情況下，只有上對(duì)齊、下對(duì)齊、居中和拉伸。
align-content適用與多行的情況下(多行)，單行無(wú)效?？梢栽O(shè)置上對(duì)齊、下對(duì)齊、居中對(duì)齊、拉伸以及平分剩余空間等操作
單行找 align-items 多行找 align-content

<body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
</body>
<style>div{width: 600px;height: 400px;background-color: pink;display: flex;  /* 父容器flex布局 */flex-direction: row;  /* //主軸方向x */justify-content: center;/* align-items: center; 只是對(duì)單行起效 */flex-wrap: wrap;align-content: center;}div span{width: 150px;height: 100px;background-color: purple;color: aliceblue;margin: 10px; //外邊距}

在這里插入圖片描述

2.7 flex-flow

? flex-flow 屬性是我們 flex-direction (主軸方向）和 flex-wrap(是否換行) 屬性的符合屬性。

<body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
</body>
<style>div{width: 600px;height: 400px;background-color: pink;display: flex;  /* 父容器flex布局 */flex-flow: row wrap;align-content: center;}div span{width: 150px;height: 100px;background-color: purple;color: aliceblue;margin: 10px; //外邊距}
</style>

在這里插入圖片描述

三、flex布局中子項(xiàng)常用屬性

flex子項(xiàng)中常見(jiàn)屬性主要有一下三個(gè)：

flex 子項(xiàng)占的份數(shù)
align-self 控制子項(xiàng)自己在側(cè)軸的排列方式
order 定義子項(xiàng)的排列順序（前后順序）

3.1 flex 屬性:

? 定義子項(xiàng)目來(lái)分配甚于空間，用flex來(lái)表示占多少份。

.item{

? flex : <number> ; /* default 0 */

}

案例一：

<body><section><div>1</div><div>2</div><div>3</div></section>
</body>
<style>section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto; //居中}section div:nth-child(1){width: 100px;height: 150px;background-color: red;}section div:nth-child(3){width: 100px;height: 150px;background-color: blue;}section div:nth-child(2){background-color: green;flex: 1;}
</style>

展示效果：在這里插入圖片描述

案例二：

<body><p><span>1</span><span>2</span><span>3</span></p>
</body>
<style>p {display: flex;width: 60%;height: 150px;background-color: pink;margin: 100px auto; //居中}p span {flex:1;background-color: chocolate;margin: 10px;}
</style>

在這里插入圖片描述

3.2 algin-self 屬性

? align-self 控制子項(xiàng)自己在側(cè)軸上的排列方式。允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式?？筛采w align-items屬性。默認(rèn)值為auto，表示繼承父項(xiàng)目的 align-items 屬性，如果沒(méi)有父元素，同等與stretch。

<body><p><span>1</span><span>2</span><span>3</span></p>
</body>
<style>p {display: flex;width: 80%;height: 300px;background-color: pink;margin: 100px auto; /* 居中 *//* align-items:flex-end;  z只想讓3號(hào)盒子下對(duì)齊*/}p span {width: 150px;height: 100px;background-color: purple;margin-right: 5px;}p span:nth-child(3){/* 只改變3號(hào)盒子的對(duì)齊方式 */align-self: flex-end;  }
</style>

在這里插入圖片描述

3.2 order 屬性

? 定義項(xiàng)目的排列順序，數(shù)值越小，排列越靠前，默認(rèn)為0。

注意：與 z-index 不一樣。

<body><p><span>1</span><span>2</span><span>3</span></p>
</body>
<style>p {display: flex;width: 80%;height: 300px;background-color: pink;margin: 100px auto; /* 居中 *//* align-items:flex-end;  z只想讓3號(hào)盒子下對(duì)齊*/}p span {width: 150px;height: 100px;background-color: purple;margin-right: 5px;}p span:nth-child(3){/* 只改變3號(hào)盒子的對(duì)齊方式 */align-self: flex-end; /* 默認(rèn)是0，-1更小，所有在前面 */order: -1;}
</style>

在這里插入圖片描述

查看全文

http://www.risenshineclean.com/news/55601.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

模板網(wǎng)站怎么做優(yōu)化谷歌官方網(wǎng)站注冊(cè)

CSS:Flexible Box彈性盒子布局

一、flex布局原理

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

2.1 常見(jiàn)父項(xiàng)屬性

2.2 flex-direction 屬性

2.2.1主軸與側(cè)軸

2.2.2 屬性值

2.3 justify-content 屬性

2.4 flex-wrap屬性

2.5 align-items屬性

2.6 align-content屬性

2.7 flex-flow

三、flex布局中子項(xiàng)常用屬性

3.1 flex 屬性:

3.2 algin-self 屬性

3.2 order 屬性

相關(guān)文章：

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

CSS:Flexible Box彈性盒子布局

一、flex布局原理

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

2.1 常見(jiàn)父項(xiàng)屬性

2.2 flex-direction 屬性

2.2.1主軸與側(cè)軸

2.2.2 屬性值

2.3 justify-content 屬性

2.4 flex-wrap屬性

2.5 align-items屬性

2.6 align-content屬性

2.7 flex-flow

三、flex布局中子項(xiàng)常用屬性

3.1 flex 屬性:

3.2 algin-self 屬性

3.2 order 屬性

相關(guān)文章：

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

三、flex布局中子項(xiàng)常用屬性