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; 主轴方向垂直方向，起点在下方

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<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 class="warp">

<div class="box1">box1</div>

<div class="box2">box2</div>

</div>

<hr>

<div class="warp1">

<div class="box1">box1</div>

<div class="box2">box2</div>

</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:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等

```css

/* 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; 子元素在第一行文字的基线对齐

```html

.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 class="box">

<span>XJX</span>

<img src="../img/bg1.jpg" alt="">

</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; 自动分配距离

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

```css

.warp {

display: flex;

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

align-content: flex-start;

align-content: flex-end;

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

align-content: center;

/* 自动分配距离 */

align-content: space-around;

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

align-content: space-between;

}

```

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<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 class="box">

<p>左边</p>

<p>中间</p>

<p>右边</p>

</div>

</body>

</html>

```

* #### 复合写法

```css

flex-flow:flex-direction flex-wrap;

例：

flex-flow:cloumn wrap;

```

### 1.5 项目属性——写在弹性子元素上

- align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）

此属性和弹性容器的 align-items 属性作用相同

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

* align-self: flex-start;（侧轴）交叉轴起点对齐

* align-self: flex-end; （侧轴）交叉轴终点对齐

* align-self: center; （侧轴）交叉轴中点对齐

```css

.warp .box1 {

height: auto;

background-color: red;

align-self: auto;

align-self: stretch;

}

.warp .box2 {

background-color: pink;

align-self: flex-start;

align-self: flex-end;

}

.warp .box3 {

background-color: brown;

align-self: center;

}

```

- order属性；子元素的排列次序

- 属性值为数值，没有单位，默认数值为0，数值越小，排列越靠前

- 必须为整数，不能为小数，可以为负数

```css

.warp .box1 {

background-color: red;

order: 1;

}

.warp .box2 {

background-color: pink;

order: 0;

}

.warp .box3 {

background-color: brown;

order: -1;

}

```

### flex

- 作用：用于指定弹性子元素如何分配空间。

flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

- flex-grow属性：子元素的放大比例（子项宽度和<父盒子宽度的时候）

- 属性值为数值，没有单位，默认值为0，表示不放大

- 负值对该属性无效

- 可以为小数

- 注意：当容器有剩余空间时有效

```css

.warp {

width: 400px;

height: 400px;

display: flex;

}

.warp div {

width: 100px;

height: 100px;

}

/* 剩余空间400-300=100 */

.box1 {

background-color: red;

flex-grow: 2;

/* 100+100*2/4 = 150 */

}

.box2 {

background-color: pink;

flex-grow: 1;

/* 100+100*1/4=125 */

}

.box3 {

background-color: brown;

/* 100+100*1/4=125 */

flex-grow: 1;

}

```

- flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）

- 属性值为数值，没有单位

- 默认值为1，表示当空间不足时，等比例缩小

- 属性值为0，表示当空间不足时，不缩小

- 负值对该属性无效

- 可以为小数

```css

.warp {

width: 500px;

height: 400px;

display: flex;

}

.warp div {

width: 200px;

height: 100px;

}

/*不足空间，缺了100 600-500=100*/

.box1 {

background-color: red;

flex-shrink: 2;

}

.box2 {

background-color: pink;

flex-shrink: 1;

}

.box3 {

background-color: brown;

flex-shrink: 1;

}

每个元素的宽

(当前元素的宽*shrink值)/(元素1*元素1shrink值+元素2*元素2shrink值...) * 溢出空间宽度

```

```html

- 水平垂直居中的元素的父元素上设置相关属性

- display: flex;

- justify-content: center; 主轴上子元素的对齐方式

- align-items: center; 交叉轴上子元素的对齐方式

```

```html

<style>

.wrap {

width: 400px;

height: 400px;

background-color: chartreuse;

display: flex;

/* 水平居中 */

justify-content: center;

/* 垂直居中 */

align-items: center;

}

.wrap div {

width: 100px;

height: 100px;

background-color: pink;

font-size: 30px;

}

</style>

</head>

<body>

<div class="wrap">

<div>绝对居中</div>

</div>

</body>

</html>

```

#### flex-basis

- 定义弹性盒项目基准值（即参与计算的最终值————1.基于它计算容器的剩余空间2.基于它计算增长以后的最终值）

- 取值

- auto 默认值

- 长度值 【一个长度单位或者一个百分比】

- 注意：与项目的宽、高同时存在时，flex-basis的优先级高于宽、高

## 2、calc()函数

- 用于动态计算长度值，值灵活

- css3新增功能

- 任何长度值都可以使用calc()函数进行计算；

- calc()函数支持 "+", "-", "*", "/" 运算；

- calc()函数使用标准的数学运算优先级规则；

- 运算符前后都需要保留一个空格

- 语法：

calc(表达式)

```html

运算符前后都需要保留一个空格

width: calc(100% - 200px); 减号的前后添加空格

.box {

width: calc(100% - (10px + 20px) * 2);

height: 300px;

background-color: pink;

}

```

- 浏览器支持

在IE9+、Firefox、chrome、safari可以正常呈现

- 利用calc()实现三栏自适应布局

新型布局--弹性盒子相关推荐

  1. 一、CSS弹性布局[弹性盒子、弹性元素]

    一.CSS弹性布局 1.弹性盒子 弹性盒子的属性全都是写在父元素上面 1.1基础 解释:在父元素上写上display:flex;或者display:inline-flex;子元素就会出现弹性效果,其中 ...

  2. flex布局(弹性盒子三)

    在之前的文章里说到了弹性盒子的部分属性,接下来接着说弹性盒子的其余属性 目录 弹性盒子的属性及其属性值 1.order 顺序指定:用css指定顺序,不用html排序 2.flex-grow 子项目延伸 ...

  3. CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子

    CSS三栏布局代码详解 写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...

  4. CSS3 弹性盒子模型

    弹性盒子:flex布局 弹性盒子是一种布局方式 特点:改变元素的排列方式 采用flex布局的元素:称为flex容器,简称"容器".它的所有子元素自动成为容器成员,成为flex项目( ...

  5. 微信小程序---弹性盒子模型

    1.弹性盒子布局 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为 ...

  6. 29-lao-58案例：弹性盒子实现移动导航布局

    <head><meta charset="UTF-8"><title>汽车之家 两侧固定,中间可伸缩</title><styl ...

  7. flex属性值----弹性盒子布局

    里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法:   display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...

  8. css3弹性盒子、媒体查询、多列布局

    css3 一.弹性盒子 <head lang="en"><meta name="viewport" content="width=d ...

  9. 弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转

    <!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...

最新文章

  1. 怎么用linux设计一个小程序,“Linux”小程序发布一个月后，我们发现了什么
  2. 【Network Security！】搭建文件分享服务器，其实也可以很简单-HFS
  3. spring 框架-java配置163邮件服务器，发送邮件
  4. IOS开发之表视图(UITableView)
  5. 雷林鹏分享：PHP 数组排序
  6. dj鲜生-20-模版的抽离-base父模板的生产
  7. 慕课网vue播放器最新QQ音乐api
  8. 夜莺（Nightingale）企业级监控平台
  9. MCU简单控制DAC芯片应用（以DAC8550为例）
  10. DOS批处理简明高级教程
  11. 一个游戏程序员的学习资料【转】
  12. 【Golang】go语言实现数据结构——堆
  13. 灯哥开源ODRIVE FOC驱动器使用记录
  14. echarts柱形图+折线图混合案例
  15. 商业化广告--体系学习-- 7 -- 行业蓝图篇 --广告产品发展路径
  16. ipad和android平板应用,排名前100的iPad应用中只有一半支持Android平板
  17. R语言Duncan检验
  18. 一、Python时间序列小波分析——实例分析
  19. 多目标优化算法matlab代码大合集
  20. ffmpeg解析视频的每一帧（java ）

热门文章

  1. 0x80000000为什么等于-2147483648和负数如何在内存上储存
  2. HDU 2020 多校第七场 游记
  3. 低优先级MPTCP的设计和实现
  4. Java初学练手小项目---基于awt库，swing库以及MySQL数据库制作简易电影管理系统(一)
  5. PNG免扣透明素材，一个网站告别抠图了。
  6. android多媒体框架介绍（四）显示图形系统之hwc叠加器
  7. 7.2修改源码禁用hwc和GPU
  8. 混沌数学之Arnold模型
  9. MVP吕科——怡红公子的努力和成就
  10. 计时器（视频的计时：时间码）