移动端第十六章弹性盒子布局

科技2022-08-14 108

弹性盒子布局

1：什么是弹性盒子布局？

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 ie10以上浏览器支持 Flex是Flexible Box的缩写，意为‘弹性布局’，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

举例：

.box{ display: flex; }

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2：弹性盒子的基本概念：

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴和垂直的交叉轴。项目默认沿主轴排列

3：容器属性（父元素属性）：

排列方向：

flex-direction：属性决定主轴的方向（即项目的排列方向） ——row（默认值）：主轴为水平方向，起点在左端。 ——row-reverse：主轴为水平方向，起点在右端。 ——column：主轴为垂直方向，起点在上沿。 ——column-reverse：主轴为垂直方向，起点在下沿

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*把div变成弹性盒子加一句咒语 display:flex*/ display:flex; /*排列属性*/ /*flex-direction: row;*/ /*flex-direction: row-reverse;*/ /*flex-direction: column;*/ /*flex-direction: column-reverse;*/ width: 600px; height: 300px; background: red; margin: 0 auto; } span{ width: 100px; height: 100px; background: blue; border: 1px solid yellow; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html>

折行：

flex-wrap：默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 ——nowrap（默认）：不换行 ——wrap：换行，第一行在上方。 ——wrap-reverse：换行，第一行在下方。

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*把div变成弹性盒子加一句咒语 display:flex*/ display:flex; /*折行*/ /*flex-wrap: nowrap;*/ /*flex-wrap: wrap;*/ flex-wrap: wrap-reverse; width: 600px; height: 300px; background: red; margin: 0 auto; } span{ width: 200px; height: 100px; background: blue; border: 1px solid yellow; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html>

排列折行复合写法 flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*把div变成弹性盒子加一句咒语 display:flex*/ display:flex; /*排列折行复合写法*/ /*flex-flow: row nowrap;*/ /*flex-flow: row wrap;*/ /*flex-flow: column wrap;*/ flex-flow: column wrap-reverse; width: 600px; height: 300px; background: red; margin: 0 auto; } span{ width: 200px; height: 100px; background: blue; border: 1px solid yellow; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html>

x对起方式 justify-content：属性定义了项目在主轴上的对齐方式。 ——flex-start（默认值）：左对齐 ——flex-end：右对齐 ——center：居中 ——space-between：两端对齐，项目之间的间隔都相等。 ——space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*把父元素变成弹性盒子*/ display: flex; /*x对起方式*/ /*justify-content:space-around ;*/ /*justify-content: space-between;*/ /*justify-content: flex-start;*/ /*justify-content:center;*/ justify-content:flex-end; width:600px; height: 400px; background: red; margin: 0 auto; } span{ width: 100px; height: 100px; background: pink; border: 1px solid yellow; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html>

y单行对起方式

align-items：属性定义项目在交叉轴上如何对齐(设置单行元素，多行元素没有作用)。。 ——flex-start：交叉轴的起点对齐。 ——flex-end：交叉轴的终点对齐。 ——center：交叉轴的中点对齐。 ——baseline: 项目的第一行文字的基线对齐。 ——stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*把父元素变成弹性盒子*/ display: flex; /*y单行对起方式*/ /*align-items: flex-start;*/ /*align-items: baseline;*/ /*align-items: flex-end;*/ /*align-items: center;*/ /*align-items:stretch;*/ /*混合写法*/ /*justify-content: center; align-items: center; flex-direction: row-reverse;*/ flex-direction: column; /*align-items: flex-start;*/ /*align-items: flex-end;*/ /*align-items: center;*/ width:600px; height: 500px; background: red; margin: 0 auto; } span{ width: 100px; height: 100px; background: pink; border: 1px solid yellow; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html>

y多行对起方式

align-content：属性定义了多根轴线的对齐方式(设置多行元素，单行元素没有作用)。 ——flex-start：与交叉轴的起点对齐。 ——flex-end：与交叉轴的终点对齐。 ——center：与交叉轴的中点对齐。 ——space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 ——space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 ——stretch（默认值）：轴线占满整个交叉轴。

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*把父元素变成弹性盒子*/ display: flex; /*折行*/ flex-wrap:wrap ; /*多行对起方式*/ /*align-content: flex-start;*/ /*align-content: flex-end;*/ /*align-content: center;*/ /*align-content: space-around;*/ /*align-content: space-between;*/ /*align-content:stretch;*/ /*排列方式*/ /*flex-direction:column ;*/ /*align-content: center;*/ /*align-content: space-between;*/ /*align-content: space-around;*/ /*单行*/ /*align-items: flex-end;*/ /*align-items: center;*/ width:600px; height: 500px; background: red; margin: 0 auto; } span{ width: 200px; height: 100px; background: pink; border: 1px solid yellow; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </body> </html>

4：项目的属性（子元素属性）

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*把父元素变成弹性盒子*/ display: flex; width:600px; height: 500px; background: red; margin: 0 auto; } span{ /*width: 100px;*/ /*flex: 1;*/ height: 100px; background: pink; border: 1px solid yellow; } span:nth-child(1){ flex: 1; /*order: 1;*/ } span:nth-child(2){ flex: 2; /*order:3;*/ order:-10; } span:nth-child(3){ flex: 3; /*order:2;*/ order:-99; } span:nth-child(4){ flex: 4; /*order:40;*/ order:-1; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html>

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，控制子元素的大小。

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ /*把div盒子变成弹性盒子*/ display: flex; /*justify-content: space-between;*/ width: 900px; height: 400px; background: red; margin: 0 auto; } span{ /*display:block;*/ width:100px; height: 100px; background: blue; /*margin: 0 50px;*/ } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html> align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 flex-end baseline center stretch flex-start

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*把div变成弹性盒子加一句咒语 display:flex*/ display: flex; justify-content: space-around; align-items: center; width: 600px; height: 300px; background: red; margin: 0 auto; } span{ /*float: left;*/ /*display: block;*/ width: 100px; height: 100px; background: blue; border: 1px solid yellow; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> </html>

Processed: 0.010, SQL: 8