弹性盒子模型笔记

最新推荐文章于 2023-09-13 17:38:11 发布
最新推荐文章于 2023-09-13 17:38:11 发布
阅读量1.3k 收藏 6
点赞数 3
分类专栏： 前端 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cool_breeze_/article/details/105186137
版权

弹性盒子模型

一、弹性盒子模型的相关概念

● 伸缩容器(flex container) :包裹伸缩项目的父元素。
● 伸缩项目(flex item) :伸缩容器的每个子元素。
● 轴(axis):每个弹性盒子模型拥有两个轴。
◆ 主轴(main axis) : :伸缩项目沿其一次排列的轴被称为主轴。
◆ 侧轴(cross axis) :垂直于主轴的轴被称为侧轴。
● 方向(direction):伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述
伸缩项目排列的方向。
● 尺寸(dimension) :根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。
◆ 对应主轴的称为主轴尺寸。
◆ 对应侧轴的称为侧轴尺寸。

二、定义弹性盒子模型

display: flex;
display: inline-flex;
  • flex：设置指定元素为块级元素的弹性盒子模型。
  • inline-flex：设置指定元素为行内块级元素的弹性盒子模型。

三、flex-direction属性

这个属性设置伸缩项目的方向。

语法

flex-direction: row | row-reverse | column | column-reverse
  • row：设置主轴是水平方向
  • row-reverse：与row的排列方向相反。
  • column： 设置主轴是垂直方向。
  • column-reverse：与column的排列方向相反。

开始测试

  • row

这是HTML部分代码

<div class="container">
    <div style="background-color:#113399 ;"></div>
    <div style="background-color:#00FF00 ;"></div>
    <div style="background-color:#00DB00 ;"></div>
    <div style="background-color:#0000FF ;"></div>
    <div style="background-color:#2196F3 ;"></div>
</div>

CSS部分代码

.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;
}
/* 设置伸缩项目的样式 */
.container div {
    width: 100px;
    height: 300px;
}

测试效果如下：

GVIigx.png

发现设置为flex后伸缩项目自己就可以水平排列了（说明flex-direction的值默认为row）

接着往后看

  • column

当我把flex-direction的值改为column后

.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;

    flex-direction: column; /*  设置主轴是垂直方向 */
}
/* 设置伸缩项目的样式 */
.container div {
    width: 100px;
    height: 300px;
}

测试结果如下

在这里插入图片描述

发现所有的伸缩项目都纵向排列起来了

而且他们的高度也被压缩了（本来是300px，压缩自动后变成了120px）。

  • column-reverse
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;

    flex-direction: column-reverse; /* 与column的排列方向相反 */
}
/* 设置伸缩项目的样式 */
.container div {
    width: 100px;
    height: 300px;
}

测试结果如下

在这里插入图片描述

与上图对比发现颜色正好相反，这个属性可以使伸缩项目倒着排列。

四、justify-content属性

这个属性设置伸缩项目所在行沿着主轴的对齐方式。

伸缩项目必须设置宽高。

语法

justify-content: center | flex-star | flex-end | space-between | space-around
  • center：伸缩项目向主轴第一行的中间位置对齐。
  • flex-start：伸缩项目向主轴第一行的开始位置对齐。
  • flex-end：伸缩项目向主轴第一行的结束位置对齐。
  • space-between：伸缩项目会沿主轴平均分布在一行中。
  • space-around：伸缩项目会沿主轴平均分布在一行中，两端保留一半的空间。

开始测试

  • center
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;

    justify-content: center; /* 伸缩项目向第一行的中间位置对齐 */
}

测试结果如下

GVHKw8.png

  • space-between
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;

    justify-content: space-between; /* 伸缩项目会平均分布在一行中 */
}

测试结果如下

在这里插入图片描述

  • space-around
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;

    justify-content: space-around;
}

测试结果如下

GVbN3d.png

可以看到两边是有中间间隔的一半的长度的间隙。

五、align-items属性

这个属性用来设置伸缩项目所在行沿着侧轴的对齐方式。

语法

align-items: center | flex-start | flex-end | baseline | stretch
  • center：伸缩项目向侧轴的中间位置对齐。
  • flex-start：伸缩项目向侧轴的起点位置对齐。
  • flex-end：伸缩项目向侧轴的终点位置对齐。
  • baseline：伸缩项目根据伸缩项目的基线对齐。
  • stretch：默认值，伸缩项目拉伸填充整个伸缩容器。

开始测试

  • center
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;

    align-items: center; /* 纵向居中 */
}

测试结果如下

在这里插入图片描述

  • baseline（跟不设置的时候一样）

  • stretch，默认值（如果伸缩项目中不设置宽，则自动纵向拉满）

.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;

    align-items: stretch;
}

测试结果如下

在这里插入图片描述

六、flex-wrap属性

这个属性用来设置伸缩项目是单行显示还是多行显示。

语法

flex-wrap: nowrap | wrap | wrap-reverse
  • nowrap：默认值，设置伸缩项目单行显示。这种方式可能导致溢出伸缩容器。
  • wrap：设置伸缩项目多行显示。
  • wrap-reverse：与wrap相反。

开始测试

  • nowrap
  • 这里为了能够测试出效果，修改HTML结构。
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;

    flex-wrap: nowrap;
}

<div class="container">
    <div style="background-color:#113399 ;"></div>
    <div style="background-color:#00FF00 ;"></div>
    <div style="background-color:#00DB00 ;"></div>
    <div style="background-color:#0000FF ;"></div>
    <div style="background-color:#2196F3 ;"></div>
    
    <div style="background-color:#113399 ;"></div>
    <div style="background-color:#00FF00 ;"></div>
    <div style="background-color:#00DB00 ;"></div>
    <div style="background-color:#0000FF ;"></div>
    <div style="background-color:#2196F3 ;"></div>
</div>

测试结果如下

在这里插入图片描述

可以看到，如果是nowrap（默认值）的话，10个伸缩项目很明显被压缩了，而不会自动换行。

如果改成wrap

  • wrap
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;

    flex-wrap: wrap; /* 设置伸缩项目多行显示 */
}

测试结果如下

在这里插入图片描述

设置为wrap后伸缩项目就可以自动换行了，只要第一行显示不下了就会自动换行。

  • wrap-reverse
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 600px;

    flex-wrap: wrap-reverse; /* 行会倒过来 */
}

测试结果如下

在这里插入图片描述

设置wrap-reverse会使行颠倒。

七、align-content属性

这个属性用来设置伸缩行的对齐方式。该属性会更改flex-wrap属性的效果。

注意：align-content这个属性必须配合flex-wrap使用才有效果。

语法

align-content: center | flex-start | flex-end | space-between | space-around | stretch
  • center：各行向伸缩容器的中间位置对齐。
  • flex-start：各行向伸缩容器的起点位置对齐。
  • flex-end：各行向伸缩容器的终点位置对齐。
  • space-between：各行会平均分布在一行中。
  • space-around：各行会平均分布在一行中，两端保留一半的空间。
  • stretch：默认值，各行将会伸展以占用额外的空间。

开始测试

  • 先修改一下css样式（修改高度），看一下默认效果是什么样的
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 700px;

    flex-wrap: wrap;

    /* align-content: center; */
}

测试结果如下

在这里插入图片描述

我们可以发现当我增大高度之后，第二行就自动往下移动，而第一行一直没动。

好，接着测试

  • center
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 700px;

    flex-wrap: wrap;

    align-content: center;
}

测试结果如下

GZZG9J.png

改为center之后，这两行会一起垂直居中。

  • flex-start
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 700px;

    flex-wrap: wrap;

    align-content: flex-start; /* 各行向伸缩容器的起点位置对齐 */
}

测试结果如下

在这里插入图片描述

使用flex-start后，这两行会在顶部紧紧挨在一起。

  • flex-end
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 700px;

    flex-wrap: wrap;

    align-content: flex-end; /* 各行向伸缩容器的终点位置对齐 */
}

测试结果如下

GZmBSH.png

使用flex-end后，这两行会在底部紧紧挨在一起。

  • space-between
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 700px;

    flex-wrap: wrap;

    align-content: space-between; /* 各行会平均分布在一行中 */
}

测试结果如下

GZmOtU.png

使用space-between，各行会平均分布。

  • space-around
.container {
    /* 将当前元素设置为弹性盒子模型的伸缩容器 */
    display: flex;
    border: 1px solid #000;
    width: 600px;
    height: 700px;

    flex-wrap: wrap;

    align-content: space-around;
}

测试结果如下
在这里插入图片描述

顶部和底部两端是空出来一点间隙的。

八、flex-flow属性

这个属性是flex-direction和flex-wrap的简写。

语法

flex-flow: <'flex-direction'> || <'flex-wrap'>

九、flex属性

简写属性，用于设置伸缩项目如何伸长或缩短以适应伸缩容器中的可用空间。

语法

flex: auto | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  • auto：伸缩项目会根据自身的宽度和高度确定尺寸，相当于将该属性设置为flex: 1 1 auto。
  • none：伸缩项目会根据自身的宽度和高度确定尺寸，相当于将该属性设置flex: 0 0 auto。

十、align-self属性

这个属性用来设置伸缩项目自身元素在侧轴的对齐方式。

语法

align-self: center | flex-start | flex-end | baseline | stretch
  • center：伸缩项目向侧轴的中间位置对齐。
  • flex-start：伸缩项目向侧轴的起点位置对齐。
  • flex-end：伸缩项目向侧轴的终点位置对齐。
  • baseline：伸缩项目根据伸缩项目的基线对齐。
  • stretch：默认值，伸缩项目拉伸填充整个伸缩容器。

十一、order属性

这个属性用来设置伸缩项目在布局是的顺序。

语法

order: <intege>
  • integer：表示当前伸缩项目所在的次序。
<div class="container">
    <div style="background-color:#113399 ; order: 3;"></div>
    <div style="background-color:#00FF00 ; order: 2;"></div>
    <div style="background-color:#00DB00 ; order: 1;"></div>
    <div style="background-color:#0000FF ; order: 4;"></div>
    <div style="background-color:#2196F3 ; order: 5;"></div>
</div>

测试结果如下

在这里插入图片描述

第一个伸缩项目和第三个伸缩项目交换位置。

码小余の博客
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
CSS基础笔记七，怪异盒子和弹性盒子（弹性盒子的属性，子容器镜像（flex-direction），水平（justify-content），垂直（align-itmes），子容器的权重（flex-数））
qq_55006020的博客
06-28 2859
标准盒子模型，外边距（margin），内边距（padding），线宽（border），内容。内边距和线框会撑开容器怪异盒子模型，外边距（margin），内边距（padding），线框（border），内容。内边距和相框会压缩容器怪异盒子的开启，box-siziing：bober-box 把标准盒子变成怪异盒子content-box 把怪异盒子变成标准盒子弹性盒子模型。通过设置弹性盒子模型，可以更改子容器在父级容器的平均摆放距离开启：display-flex子容器会自动横向摆放。
弹性盒子模型
weixin_61561066的博客
04-29 899
目录 一、弹性盒子模型 1、布局模式 2、基本概念 3、容器的属性 4、项目属性 二、页面中的多媒体嵌入 1、视频 2、音频 三、CSS3中过渡效果 一、弹性盒子模型 1、布局模式 (1)Tabel布局：内容格式整齐 (2)div+css：盒子模型(灵活、比较难控制） (3)display：flex(弹性盒子,也是使用div，让div的display属性为flex) 2、基本概念 (1)容器(flex container)：...
mybatis collection_SSM之Mybatis
weixin_39646084的博客
11-28 133
概述Mybatis是一个持久层框架，它封装了JDBC操作的细节，使用了ORM思想实现了对结果集的封装ORM：Object Relational Mappging(对象关系映射)，就是把数据库表和实体类及实体类属性对应起来，使得我们操作实体类时就可以操作数据库表使用步骤下载jar包创建mybatis-config.xml文件，配置配置头<?xml version="1.0" encoding=...
弹性盒模型（详解）
weixin_46726346的博客
10-18 5460
摘要 关于弹性盒模型，属性也是比较多，属性的值也是比较杂，所以看起来也是比较吃力，总是学习的时候似乎已经掌握了，慢慢不用的话一些属性又不会了。 这一篇文章，只去理解弹性盒模型的属性，而不会列出所有属性的值。 重点在于理解，而非去死记硬背。 1.创建弹性盒子 所有人应该都知道我们应该使用display:flex来创建一个弹性盒子。 但是其实还有另一种创建方式：display:inline-flex。 乍一看这个属性和display:block , display:inline-block是不是有一点点像。 其
【前端】CSS-Flex弹性盒模型布局
山赶着山，山山漫漫结成关
09-01 5628
CSS弹性盒子（Flexbox）是一种强大而灵活的布局模型，能够简化我们对网页布局的控制，并使页面在不同设备上的适应性更强。本文将介绍CSS弹性盒子的基本概念、属性和使用方法，帮助你更好地掌握弹性盒子布局。决定主轴的方向（即项目的排列方向）弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap定义了项目在主轴上的对齐方式定义项目在交叉轴上如何对齐定义了多根轴线的对齐方式。
弹性盒模型
qq_45723913的博客
06-02 297
弹性盒模型可以解决横向排列的问题还有盒子之间的间距 display:Flex; dom结构 <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>
CSS3弹性盒模型开发笔记（三）
12-03
**CSS3弹性盒模型**，也称为Flexbox，是一种现代的布局模式，它允许开发者更加灵活地处理元素的排列和对齐方式，特别是在响应式设计中。本文将深入讲解两个关键属性：`box-pack` 和 `box-align`，以及它们在处理弹性...
CSS3弹性盒模型开发笔记（一）
01-21
弹性盒模型（Flexible Box Moudle），该模型用于决定元素在盒子中的分布方式以及处理盒子的可用空间。这与XUL（Firefox浏览器的用户交互语言）相似，其他语言也使用相同的盒模型。如XAML，GladeXML等。通过弹性盒...
CSS3弹性盒模型开发笔记（二）
12-13
在本篇开发笔记中，我们将深入探讨box-flex属性，它是弹性盒模型中的核心特性，能帮助开发者灵活控制子元素在容器内的空间分布。 box-flex属性允许你指定子元素在容器中的伸缩能力。在传统布局中，我们通常使用...
html笔记含http协议图解
04-11
6- 盒子种类：在CSS中，每个元素都被视为一个“盒子”，包括内容区域、内边距、边框和外边距。理解盒模型是进行精确布局的关键，可以通过`box-sizing`属性来改变元素的盒模型计算方式。 7- 定位：CSS定位包括静态...
弹性盒子（Flex Box）模型
zg0601的博客
10-21 936
弹性盒子（Flex Box）模型
Flex布局设置内容强制不换行无效的解决方法
u014785859的博客
06-15 3775
使用弹性盒子Flex布局非常方便，比如实现左右布局的时候，简短的两行样式就实现了。不过虽然Flex布局很灵活，但有时候也会出现一些意想不到的效果...
弹性盒(flex box)布局属性详解
azkhx的博客
08-15 1762
1)弹性盒也叫伸缩布局盒模型它是**css3引入的一种新的布局模式——flexbox**布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更便利于开发。2)主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。
【CSS布局】—— flex（弹性）布局
热门推荐
qq_49002903的博客
08-28 3万+
CSS3新增了弹性盒子模型( Flexible Box或ElexBox)，是-种新的用于在HTML页面实现布局的方式。使得当 HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。弹性盒子模型实现HTML页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响HTML页面性能...
弹性盒子模型（1)
thwr1881的博客
04-29 522
弹性盒子模型 1、布局模式： 通过之前的学习我们已经学习了两种布局模式，分别是Tbael布局和div+css的盒子模型，而除了这两种布局模式，还有一种布局模式就是弹性盒子模型布局，而弹性盒子模型( Flexible Box)则是CSS3新增的一种布局方式，是一种新的用于在HTML页面实现布局的方式。使得当HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。弹性盒子模型依旧使用div，但需要将div的display属性变为flex。 2、基本属性 (1)容器(flex container)：是一
盒子模型分类（欢迎补充）
huamengyyds的博客
09-13 813
标准盒子=自身宽高+内外边距+内外边距IE盒子=自身宽高-内外边距-内外边距flex布局是一个新的布局方式，是css盒子模型；弹性盒子的运用方式有很多种：基础用法举例：代码运行结果：（注意：flex布局最多分为12份，超过12份不会生效）
15-弹性盒模型
weixin_55101030的博客
09-20 661
弹性盒模型
css之弹性盒布局
m0_67535399的博客
03-06 864
常用于移动端的布局
你知道的和不知道的flex弹性盒子
tscn1的博客
03-16 192
flex弹性盒子触发弹性盒子写在父级上面的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsjustify-content和align-items的垂直水平居中align-contentflex子级上的属性orderalign-selfflex-growflex-basisflex-shrinkflex-basis和widthflex-shrink和flex-basis中间固定两边自适应利用flex流式布局圣杯布局 触发弹性盒子 只需要设
线性回归模型笔记整理
最新发布
10-12
下面是线性回归模型的笔记整理： 1. 线性回归模型的基本形式为：y = wx + b，其中y为因变量，x为自变量，w为权重，b为偏置。 2. 线性回归模型的目标是最小化预测值与真实值之间的误差，通常使用均方误差（MSE）...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码小余の博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值