第二十天-弹性盒-CSDN博客

本文链接：https://blog.csdn.net/Z2908039948/article/details/129232870

1、弹性盒子

1.1 什么是弹性盒子？

- 弹性盒子是CSS3的一种新的布局模式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

- - 操作方便，布局简单，移动端使用广泛

- PC端浏览器支持情况较差

- IE11或更低版本中，不支持或部分支持

- 在盒模型中较为灵活

- 弹性盒模型的内容包括：弹性容器、弹性子元素——项目

- 原理：为父元素设置flex属性，控制子元素的位置及排列方式

- 应用场景 : 移动端

1.2 设置弹性盒子——display属性

- display: flex; 将对象作为弹性伸缩盒显示

- display: inline-flex; 将对象作为内联块级弹性伸缩盒显示

- 注意：

> 将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效

> 弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高

1.3 基本概念

- flex容器、项目——弹性子元素

- 默认在容器中有两根轴线

- 默认主轴方向——x轴方向，水平向右（左侧为主轴起点，右侧为主轴终点）

- 默认交叉轴方向——y轴方向，水平向下（上方为交叉轴起点，下方交叉轴终点）

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

![image-20210514142437914](image-20210514142437914.png)

注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外一边就是侧轴

1.4 容器属性——添加弹性容器上

- flex-direction属性：设置主轴的方向，子元素的排列方向

- flex-direction: row; 默认值，主轴方向为水平方向，起点在左端

- flex-direction: row-reverse; 主轴方向为水平方向，起点在右端

- flex-direction: column; 主轴方向为垂直方向，起点在上方

- flex-direction: column-reverse; 主轴方向垂直方向，起点在下方

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.warp,

.warp1 {

width: 300px;

height: 300px;

background-color: aqua;

/* 设置弹性盒*/

display: flex;

}

div {

width: 100px;

height: 100px;

}

/* X为主轴 */

.warp {

flex-direction: row;

flex-direction: row-reverse;

}

/* Y为主轴 */

.warp1 {

flex-direction: column;

flex-direction: column-reverse;

}

.warp .box1 {

background-color: red;

}

.warp .box2 {

background-color: pink;

}

.warp1 .box1 {

background-color: purple;

}

.warp1 .box2 {

background-color: blue;

}

</style>

</head>

<body>

</div>

<hr>

</div>

</body>

</html>

- justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,

- justify-content: flex-start; 默认值，主轴顶端对齐

- justify-content: flex-end; 主轴的末端对齐

- justify-content: center; 居中对齐，子元素位于弹性容器的中心

- justify-content: space-between; 两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等。

- justify-content: space-around; 子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。

- space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等

/* X为主轴 */

.warp {

/* 设置弹性盒*/

display: flex;

flex-direction: row;

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

}

/* Y为主轴 */

.warp1 {

/* 设置弹性盒*/

display: flex;

flex-direction: column;

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

}

- align-items属性：弹性子元素在（侧轴）交叉轴上的对齐方式

- align-items: stretch; 默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度

- align-items: flex-start;子元素在侧轴顶端对齐

- align-items: flex-end; 子元素在侧轴末端对齐

- align-items: center; 子元素在侧轴中间对齐

- align-items: baseline; 子元素在第一行文字的基线对齐

.warp {

/* 设置弹性盒*/

display: flex;

flex-direction: row;

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: stretch;(height: auto;)

}

/* align-items: baseline; */

<style>

/* align-items: baseline; */

.box {

width: 400px;

height: 400px;

background-color: pink;

display: flex;

align-items: baseline;

margin: 50px auto;

}

.box span {

width: 100px;

height: 100px;

background-color: red;

font-size: 20px;

color: #fff;

}

.box img {

height: 150px;

}

</style>

</head>

<body>

</div>

</body>

</html>

- flex-wrap属性：指定弹性盒子的子元素换行方式

- flex-wrap: wrap; 换行，第一行显示在上方

- flex-wrap: wrap-reverse; 换行，第一行显示在下方

- flex-wrap: nowrap; 默认值，不换行

注意：父元素有固定高度且高度大于子元素高之和换行中间有缝隙

父元素高度有内容撑开换行没有缝隙

- align-content属性：折行,行与行之间有间隙,去除间隙 ,控制侧轴对齐方式（去掉了中间的间隙）

要设置： flex-wrap: wrap;

- align-content: flex-start; 顶端没有行间距

- align-content: flex-end; 底对齐没有行间距

- align-content: center; 居中没有行间距

- align-content: space-between; 两端对齐，中间自动分配

- align-content: space-around; 自动分配距离

注意：弹性盒项目为多行时有效

.warp {

display: flex;

/* 设置后没有间隙上端下端*/

align-content: flex-start;

align-content: flex-end;

/* 设置后没有间隙中间*/

align-content: center;

/* 自动分配距离 */

align-content: space-around;

/* 两端对齐，中间自动分配 */

align-content: space-between;

}

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.box {

height: 500px;

background-color: chartreuse;

display: flex;

}

.box p:nth-child(1),

.box p:nth-child(3) {

width: 200px;

height: 480px;

background-color: red;

}

.box p:nth-child(2) {

/* 中间剩余空间分配 */

flex: 1;

height: 480px;

background-color: green;

}

</style>

</head>

<body>

</div>

</body>

</html>

```

复合写法

flex-flow:flex-direction flex-wrap;

例：

flex-flow:cloumn wrap；