弹性布局换行 弹性布局脱离文档流吗

为什么弹性盒子放不下了不会自动换行

弹性盒布局的容器（flex container）指的是采用了弹性盒布局的 DOM 元素，而弹性盒布局的条目（flex ）指的是容器中包含的子 DOM 元素。图中的最外围的边框表示的是容器，而编号 1 和 2 的边框表示的是容器中的条目。

这种方案的优点是每个显示终端可以根据自身情况自由设计，从而为每个显示终端专门设计一种方案。这无疑给设计师和用户体验带来了巨大的好处。

flex的用法

2、对齐和间距控制：通过使用不同的属性和方法，可以控制弹性项目在主轴和交叉轴上的对齐方式、间距大小等，实现灵活的布局效果。

display：flex是CSS中的一个属性值，用来定义一个容器元素为一个弹性容器（flexcontainer），即使其子元素（flexs）也成为弹性项目（flexs），从而实现弹性布局。

相比之下，自适应布局和响应式布局更能解决屏幕跨度过大的问题。

具体地说，使用display:flex可以创建一个弹性容器，并自动使其子元素成为弹性项目。弹性容器会根据一定的规则自动调整弹性项目的位置和大小，以适应不同屏幕尺寸和布局需求。弹性容器的主要特性包括：

1、弹性流动性：弹性容器的子元素会根据可用空间自动调整大小和位置，以填充或占据剩余的空间。这使得布局更加灵活，能够适应不同的屏幕尺寸和设备方向变化。

3、排序和排序控制：可以通过设置不同的排序属性，改变弹性项目在弹性容器中的顺序，实现重新排序的效果。

当设置父元素的display属性为flex时，父元素就成为了弹性容器（flexcontainer），它的子元素将自动成为弹性项目（flexs）。以下是一些常见的弹性容器属性（即父元素的属性）：

1、flexdirection：设置弹性项目的排列方向，可以是水平方向（row）、水方向（rowrrse）、垂直方向（column）、垂直反方向（columnrrse）。

2、flexwrap：定义弹性项目是否换行，可以是单行（nowrap）、多行（wrap）、换行反方向（wraprrse）。

3、justifycontent：控制弹性项目在主轴方向上的对齐方式，可以是居中（center）、起始对齐（flexstart）、末尾对齐（flexend）、空间均匀分布（spacebetween）、空间均匀分布且首尾对齐（spacearound）。

4、aligns：控制弹性项目在交叉轴方向上的对齐方式，可以是居中（center）、起始对齐（flexstart）、末尾对齐（flexend）、拉伸填充（stretch）。

用于调整弹性容器和弹性项目的属性

1、flexgrow：定义弹性项目的放例。

2、flexshrink：定义弹性项目的缩小比例。

3、flexbasis：定义弹性项目的初始大小。

4、alignself：定义单个弹性项目的交叉轴对齐方式。

需要注意的是，弹性容器的属性主要控制弹性项目的布局方式，而不是直接控制弹性项目的具体样式。通过设置弹性容器的属性，能够实现灵活的自适应布局，提供更好的响应性和可扩展性。

弹性布局-浮动布局

}div span{

浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。

效果图

原理非常简单，左右侧边栏定宽并浮动，中部内容区放不浮动、默认width：auto并设置相应外边距，让左右侧边栏浮动到上面。注意：子元素设置为浮动之后，父对象的高度就坍塌了，需要设置父对象后的元素清除浮动，这样父对象的高度才能被浮动子元素撑起来了。

效果图

思路：

1)既然HTML里面要让center放前面，为了让left跑到center前面，那center也必须浮动了，否则因为都是块元素他们会分两行。

2)浮动之后还要让center宽度自适应，那明显width只能，然后上面讨论的几个网页的基本布局，在一定程度上解决了页面适配的问题。但随着显示终端的发展，出现了平板电脑、移动设备等屏幕。这些设备出现增加了屏幕尺寸的跨度。但是上面讨论的几种网页布局就是不支持屏幕尺寸跨度过大的情况。在父元素中设width:auto，还有两侧margin，其实也就是父对象宽度自适应，center只是继承content的宽度。

3)对left使用负的margin让他们浮动到上方去。

两种发放多少有一点区别，另外就是 calc() 函数。

总结： 使用浮动来进行布局，一个比较大的问题是清除浮动。这个可以使用一个after伪类来清除。更大的问题是浮动性像水一样向上流动，难以把握。在元素较多而且元素高度尺寸不一的情况下，单纯使用浮动只能实现上端对齐，这对于适应多种设备的布局就显得力不从心了。目前的做法是牺牲一部分内容，将元素做成等高排列，从美观上看也当然也是极好的，比参不齐的排列要美观。

如何实现网页布局如何实现网页布局功能

网页布局方法

众所周知，屏幕的尺寸千万别。当考虑网页布局时，主要的考虑因素是:

同时，网页布局的设计和实现要综合考虑:

虽然屏幕宽度、高度、长宽比千万别。而网页的组织主要是基于宽度适配和高度延伸。

当然，也有一些网页需要高度自适应，比如视频网站的全屏播放。

这里主要讨论的是宽度自适应。高适应也可以类似处理，这里就不赘述了。

有三种基本布局:静态布局、丢失布局和灵活布局。

静态布局

静态布局使用像素(px)作为页面设计的单位。在不同的显示宽度下，页面元素大小都是固定的。

流式布局

流式布局将页面宽度设置为百分比。当显示区域改变时，页面布局将按比例改变。

流式布局强调适应屏幕宽度的变化。在实际应用中，往往设置为适应宽度，而高度是不变的。当页面变大时，页面布局会水平加宽。

弹性布局

灵活布局采用rem/em等相对单位，是相对单位，会随着屏幕变化而变化。

柔性布局强调在不同条件下，显示内容除大小不同外，在布局上是一致的。也就是说，柔性布局的宽度和高度会按比例放大。当页面被放大时，整个页面被放大。

设有两个屏幕尺寸，一个是640px，一个是1080px。640px页面下有大小为64px的元素。

如果是静态布局，在640px屏幕下，元素设置为64px。1080px屏幕下，还是64px。元素的大小不变。

如果是流式布局，页面元素将被设置为640像素屏幕宽度的10%。在1080px屏幕下，10%的长度变成了1080px10%=108px。元素的大小随着屏幕而增加。

如果是弹性布局，设在640px的屏幕下，设置了1rem=16px，那么64px就是4rem的大小。在1080px的屏幕下，设置1rem=27px，4rem的大小就变成了427=108px。元素大小也随着屏幕而增加。

静态布局

静态布局无法响应页面变化，这既是优点也是缺点。

缺点是屏幕变大了会有空白域。当屏幕变小时，需要通过滚动条浏览页面内容。

好处是静态页面在任何情况下都可以按照页面的设计来显示，适应性的问题最少，工作量最少。

其实目前很多大型网站都是采用静态布局。正因为适应性广，所以几乎不存在什么适应性问题。任何用户在任何情况下打开一个页面都会显示相同的页面。

虽然屏幕尺寸有很多种，但在一定程度上，屏幕宽度一般都在一个范围内。在应用静态布局时，放弃适应一些市场份额较小的小屏幕显示器是合适的。

流式布局

流式布局多采用宽度适配、固定高度的方式。换句话说，页面这次被水平拉伸或收缩了。

这样做的好处是页面可以适应屏幕的宽度，充分利用屏幕面积，避免大量空白。

缺点是屏幕太宽，页面会变宽，让整个页面显得不协调。当屏幕过窄时，页面会被缩小到很小的尺寸，一些元素的显示会出现问题。

为了避免这个问题，我们实际上应该。通常，将设置和最小装配宽度。当屏幕超过和最小宽度时，页面将不再适合屏幕。

弹性布局

灵活布局采用宽度和高度同时放大的方法，力求不同屏幕下页面布局一致。

灵活布局兼顾了静态布局和流式布局的优点。一方面可以适应屏幕的变化，另一方面也不会造成页面横向加宽，造成比例不协调，在一定程度上保证了页面布局与原设计的一致。

然而，这也带来了新的问题。放大页面会导致一些元素被拉伸，尤其是元素，会导致失真。

因此，灵活布局往往采用与流式布局相同的方式，设置和最小响应大小，超过它就不会继续响应。

同时针对失真的问题，可以通过上传多个尺寸的来解决。不同的屏幕尺寸对应不同的画面。但是也会带来大量的维护工作，需要权衡。

由于静态布局的特点，一般在以下情况下采用静态布局:

流式布局更适合有字体的页面。在流式布局中，虽然文本大小不会改变，但文本段落可以通过更改换行符来改变宽度。

如果屏幕尺寸变化不大，可以考虑采用灵活布局。它可以在不改变页面布局的情况下进行调整。

事实上，有些页面采用了几种不同的布局。比如采用静态布局的侧边栏，而采用流式布局的主区域。

上面也讨论过流式布局和弹性布局不适合尺寸跨度太大的屏幕。所以基本上采用有限的最小拟合尺寸，在拟合范围内，采用流式布局或者弹性布局进行拟合。如果超出适应范围，就会变成静态布局，不再响应屏幕的变化。

适应性布局

自适应布局为不同尺寸的屏幕准备多种方案，根据不同的屏幕尺寸确定一套显示方案。具体到每个方案，可以使用上述基本的网页布局进行适配。可以看作是由一系列基本布局组成的一套方案。

一般自适应布局会设计宽屏、窄屏、移动终端等几种适配方案，然后设置屏幕适配的范围。显示时会根据匹配适应范围的屏幕大小选择一组方案进行显示。

但是，自适应布局通常不会改变页面的结构。当页面缩小时，会选择缩小、替换、隐藏一些横向的页面元素，以达到适配的目的。有一些常见的治疗方法:

响应式布局

响应式布局就是设定一组方案，通过调整行和列的显示来适应它们。当屏幕较大时，每个元素显示在一行中，当屏幕较小时，它转换为以列显示。

响应式布局适应屏幕，因为它需要换行。所以在页面缩减的过程中，页面布局会发生变化。页面缩小时，一开始会以流布局或柔性布局的形式缩小页面，直到页面宽度再也装不下为止，横向显示的元素会改为纵向显示。

适应性布局

自适应布局需要一系列页面布局。因此，设计和实施需要更多的时间。

但是因为它可以针对不同的屏幕设计不同的方案，所以方案是相对的。它的限制较少，自由度较高。

但是，请注意，自适应不是几个完全不同的方案的组合。总的来说主要部分都是一样的。只有一些水平元素是设计的。

响应式布局

响应式布局只需要一个页面布局就可以完成屏幕适配，其实现工作量相对较小。然而，有必要用一套方案来适应所有的屏幕尺寸。所以设计时要考虑很多因素。

一般来说，自适应布局适合复杂页面，响应式布局适合页面结构简单的页面。

因为移动端和PC端的巨大异，包括屏幕大小，作flex布局方式，都不一样。另一个解决方案是分别设计每一页的页面。

然而，这种方案带来了设计和实现的双重工作量。同时，产品投入使用后，需要两组人对其内容进行维护。

如果你有以下情况，可以考虑使用移动端和PC端分离的设计:

写在

没有完美的。根据自身情况选择才是硬道理。

作为设计人员，不要忘记后期的技术实现、测试、维护的工作量。同时，不要忘记项目后期迭代的难度。总之，选对最重要。

要知道，看似土的静态布局还是有大量应用的。千万不要过度设计。

网页布局怎么设置？

具体作步骤如下：1、首先打开电脑，鼠标左键双击打开“计算机”选项。

2、然后在新弹出来的页面中点击“组织”选项。3、之后在新弹出来的页面中点击“布局”选项。4、然后在新弹出来的页面中点击勾选“导航窗口”选项即可。

页面布局设置一页方法如下

1、打开word文档后，我们依次点击“页面布局”--“页边距”。

2、在页边距的下拉菜单中，我们点击“窄”，或者点击“自定义边距”，选择设置较窄的页边距。

3、页边距由宽变窄后，我们的表格就放到一页里面了。

4、我们还可以拖动每一个单元格的边框，把单元格收缩到需要的宽度即可。这样也能把word表格缩小。

5、就是我们通过调整各个单元格的大小后完成的更改设置。

6、如果可以更改word表格的样式，我们可以把竖排的文字改为横排，以节约更多的空间。

怎么设置一页的页面布局？

选中这页，打开页面布局对话框，可以调整页边距，文字的方向，等等，选择，应用于所选文字

网页布局结构有哪些？

第二，拐角型网页布局:这个与国字型布局非常相似，不过在形势上存在一定察觉，应用起来效果也比较好。

第三，标题正文型网页布局:这是在网站开发中最为简便的布局类型之一。

此外，网站制作公司还常常用到包括“T”结构、“三”型以及对称对比型等。

html模块布局方法？

1、流动布局（html网页默认的布局方式）

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为。

2、内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

2、浮动布局(float)

特点：默认布局下，块状元素独占一行，如果现在我们想让两个块状元素并排显示。就需要使用float来实现。

如下

p{

width:200px;

height:200px;

border:2pxredsolid;

float:riwidth: 800px;ght;

}3、层模型

特点：如果我想一个p在另外一个p的上面，我们就需要可以使用定位来完成，层模型的三种定位方式relative、absolute、fixed

需要设置ition:absolute(表示定位)，这条语句的作用将元素从文档流中拖出来，

然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行定位。

移动web开发流式布局--弹性布局

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

移动web开发流式布局

传统布局

浏览器现状

PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。

手机屏幕的现状

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

meta标签

最标准的viewport设置

移动web开发——flex布局

建议

flex布局原理

父项常见属性

flex-direction设置主轴的方向

1

2

3

justify-content 设置主轴上的子元素排列方式

1

2

3

align-content 设置侧轴上的子元素的排列方式（多行）

1

2

3

4

5

flex 布局解决一个布局问题

4. 当浮动框的高度超过包含框（即父布局）的高度时，包含框不会自动伸展高度，如果包含框中不包括其他的普通流，包含框的高度为0，所谓的高度坍塌现象。

当我们使用flex布局，可以自动换行的时候，经常会出现一个布局，没有自动跟在一个。因为我们设置flex的content属性是space-between。

解决办法：

通过给父级添加after伪类法，解决一排数量不够两端分布的情况。

原理：after伪类是在的时候，添加一个对应的css，这种三等分的情况，一个宽度要设置33%。给一个高度，占位。

网页布局方法

众所周知，屏幕的尺寸千万别。在考虑网页布局时，主要考虑：

同时，网页布局还应该综合考虑设计和实现上的问题：

虽然屏幕宽度、高度、宽高比千万别。但是网页的组织方式基本上是以宽度适配，高度延伸为主。

当然，也有部分网页是需要考虑高度适配的，如视频网站的全屏播放。

这里主要讨论的是宽度适配。高度适配可以做类似处理，在这里就不做赘述。

网页基础的布局主要有三种： 静态布局、流失布局、弹性布局 。

静态布局

静态布局采用像素（px）作为页面设计的单位。在不同的显示宽度下，页面元素大小都是固定的。

流式布局

流式布局以百分比设定页面宽度，当显示区域变化时，页面布局会等比的发生改变。

流式布局强调的是适应屏幕宽度的变化。在实际应用中，经常是设置成宽度适应，而高度不变。当页面变大时，页面布局相当于被横向拉宽了。

弹性布局

弹性布局更强调的是在不同的条件下，显示内容除了大小不一样，其布局是一致的。也就是说，弹性布局会宽度和高度都等比放大。当页面变大时，整个页面等比放大了。

设有两个屏幕尺寸，一个是640px，一个是1080px。有个元素在640px页面下的尺寸是64px。

如果是静态布局，在640px屏幕下，元素被设置为64px。到了1080px屏幕下，依然是64px。元素的大小不变。

如果是流式布局，页面元素会被设置成640px屏幕宽度的10%。在1080px屏幕下，10%的长度变成了1080px 10% = 108px了。元素大小随着屏幕变大了。

如果是弹性布局，设在640px的屏幕下，设置1rem = 16px，那么 64px即为4rem大小。在1080px的屏幕下，设置1rem = 27px，4rem的大小变成了 4 27 = 108px。元素大小也随着屏幕变大了。

静态布局

静态布局没办法响应页面的变化，这个是优点也是缺点。

缺点是当屏幕变大时，会出现空白区域。当屏幕变小时，需要通过滚动条来浏览页面内容。

优点则是因为静态页面可以在任何条件下都按页面的设计进行显示，其适配性的问题最少，实现工作量最小。

实际上，目前很多大型的网站都是采用静态布局的。就是看中了其广泛的适配性，几乎不存在什么适配性问题，任何用户在任何条件下打开页面都显示的都是一样的。

虽然说屏幕尺寸种类繁多，但是在一定程度上屏幕宽度大体还是在一个范围之内的。应用静态布局时，可以适当放弃适配一些市场占有率很少的小屏幕显示器。

流式布局

流式布局大部分都是采用宽度适配，固定高度的方式。也就是说，页面此次被横向拉长或缩小了。

这样做的优点是页面可以适配屏幕的宽度，可以充分利用屏幕的面积，不至于出现大量空白的情况。

其缺点是，当屏幕过于宽时，页面会被拉得宽，整体显得不太协调。当屏幕过于窄时，页面会被缩得很小，部分元素的显示会出现问题。

为了规避这个问题，在实际应该上。一般会设置一个和最小适配宽度。当屏幕超过了最小宽度时，页面将不再适配屏幕。

弹性布局

弹性布局采用的是宽度和高度同时放大的方式，力求让页面在不同屏幕下在布局上是一致的。

弹性布局兼顾了静态布局和流式布局的优点，一方面其可以适配屏幕的变化，另一方面不会导致页面被横向拉宽导致比例不协调，在一定程度上保证页面布局和原设计一致。

但是这么做也带来了新的问题，页面加大会导致部分元素被拉伸，特别是元素，会导致失真。

所以弹性布局经常也采用了和流式布局一样的方式，设置最小响应尺寸，超过这个尺寸则不继续响应。

同时，针对失真问题，可以通过上传多个尺寸的进行解决。不同的屏幕尺寸响应不同的。不过因此也会带来了大量的维护工作，需要权衡。

由于静态布局特点，一般下列情况下会采用静态布局：

流式布局比较适用于文字型的页面。在流式布局中，虽然文字大小不会变化，但是文字段落仅需要改变换行就可以跟着宽度变化而变化。

如果屏幕尺寸变化不大，则可以考虑采用弹性布局的方式。既可以适配，又不改变页面的布局。

事实上，也有一些页面采用了几种不同的布局方式。例如，采用静态布局的侧边栏，而采用流式布局的主区域。

上文也讨论了流式布局和弹性布局不适合对尺寸跨度过大的屏幕进行适配。所以，基本上也都采用了限制最小适配尺寸，在适配范围内则采用流式布局或弹性布局进行适配。超过了适配范围，则变成静态布局的方式，不再响应屏幕的变化。

上面讨论的几种网页的基础布局一定程度上解决了页面适配的问题。但是随着显示终端的发展，出现了平板电脑、移动设备等屏幕。这些设备出现加大了屏幕尺寸的跨度。而上面讨论的几种网页布局恰恰是不支持屏幕尺寸跨度太大的情况的。

自适应布局

自适应布局为不同尺寸的屏幕准备多套方案，根据不同的屏幕尺寸确定一套显示方案。具体到每一套方案，则可以用上述几种基础的网页布局进行适配。可以看成是一系列的基础布局组成的一套方案。

一般自适应布局会设计宽屏、窄屏、移动端等几套适配方案，然后设定屏幕适配的范围。具体显示时，会根据屏幕尺寸匹配适配范围，选定其中的一套方案进行显示。

但是自适应布局一般情况下不会改变页面的结构。当页面缩小时，会选择缩小、替换、隐藏掉一些横向的页面元素，以达到适配的目的。有一些常见的处理方法：

响应式布局

响应式布局则是设置一套方案，通过调整行列的显示进行适配。当屏幕较大时，各个元素显示成一行，当屏幕变小时，转换转化成以列进行显示。

响应式布局因为需要换行来适配屏幕。所以其在页面缩小的过程中，页面布局会做改变。当页面缩小时，页面会先以流式布局或弹性布局的方式进行缩小，直至页面宽度再也无法适配时，横向显示的元素换行成纵向显示。

自适应布局

自适应布局需要设计是一系列页面布局。所以，在设计和实现上需要更多时间。

但是，因为其可以针对不同屏幕设计不同方案，方案之间相对。其限制较少和自由度却是比较高的。

但是注意，自适应并非几套完全不同的方案的组合，一般情况下，其主体部分是一致的。只是对部分横向的元素进行设计。

响应式布局

响应式布局只需要一个页面布局即可完成屏幕适配，其实现工作量比较小。但是，因为需要用一套方案适配所有屏幕尺寸。所以，在设计上需要考虑的因素比较多。

总的来说，自适应布局适用于较为复杂的页面，而响应式布局适用于页面结构简单的页面。

因为移动端和PC端的巨大异，包括屏幕尺寸和作方式都不尽相同。还有一种解决方案将各个端的页面单独进行设计。

这种方案优点是各个显示端可以自由的根据自身情况进行设计，从而设计出专门针对各个显示端的方案。这无疑给设计师和用户体验带来了巨大的好处。

但是这种方案带来了成倍的设height: auto; / 高度自适应 /计和实现工作量。同时，在产品投入使用后需要两套人马分别维护其内容。

如果您有如下的情况，可以考虑使用移动端和PC端分离的设计：

写在

作为设计者，千万不要忘记了后期技术的实现、测试，员的维护等工作量。同时也不要忘记了项目后期的迭代的难度。一句话，选择适合的才是最重要的。

要知道，看似很土的静态布局到现在仍然有大量的应用。千万不要做过度的设计。

【web前端】十分钟弄懂 flex 布局

，“国”字型网页布局:这个网页布局适合用在一些大型网站之中，简单大气，这种网页布局也是目前网站建设用在大型网站之中次数最多的类型之一。

flex（flexible box：弹性布局盒模型），是 2009 年 w3c 提出的一种可以简洁、快速对页面进行弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：

其中在webkit内核的浏览器中使用时，必须加上 -webkit- 前缀。

使用 flex 布局的容器（flex container），它内部的元素自动成为 flex 项目（flex ）。容器拥有 两根 的轴，水平的 主轴 （main axis），和竖直的 交叉轴 （cross axis）。

主轴开始的位置，即主轴与左边框的交点，称为 main start；主轴结束的位置称为 main end；交叉轴开始的位置，即交叉轴与上边框的交点，称为 cross start；交叉轴结束的位置称为 cross end。

按主轴或交叉轴排列， 在主轴方向上占据的宽度称为 main size，在交叉轴方向上占据的宽度称为 cross size。

注意：使用 flex 容器内元素，即 flex 的 float，clear、vertical-align 属性将失效。

flex-direction 决定主轴的方向，即项目排列的方向。有四个可能的值：row（默认） | row-rrse | column | column-rrse。

flex-wrap 决定项目在盒中无法撑满的情html模块的三种布局方法况下，是否换行。

它是 flex-direction 和 flex-wrap 的简写形式，如：row wrap | column wrap-rrse 等。默认值为 row nowrap，即横向排列 不换行。

决定 在横向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为横向主轴时，具体含义如下：

决定 在纵向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为纵向主轴时，具体含义如下：

决定了 在横向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为横向主轴时，其具体含义为：

决定了 在纵向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为纵向主轴时，其具体含义为：

该属性定义了当有多根主轴时，即 不止一行时，多行在交叉轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-s 属性将失效。align-content 可能值含义如下（设主轴为垂直方向）：

的属性在 的 style 中设置， 共有如下六种属性：

order 的值是整数，默认为 0，整数越小， 排列越靠前，如上图所示。

它定义了当 flex 容器有多余空间时， 是否放大。默认值为 0，即当有多余空间时也不放大；可能的值为整数，表示不同 的放例。

定义了当容器空间不足时， 是否缩小。默认值为 1，表示当空间不足时， 自动缩小，其可能的值为整数，表示不同 的缩小比例。

表示 在主轴上占据的空间，默认值为 auto。

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

align-self 属性允许 有自己独特的在交叉轴上的对齐方式，它有六个可能的值，默认值为 auto。

html5中float属性造成的换行如何处理

可以取三个值：

在h5开发中，经常会使用float属性来解决一些布局问题。但在某些复杂的布局中也会遇到使用float属性是导致一行中的元素无法对齐或者float元素换行等现象。在遇到这种问题时，我们可以修改元素的位置来解决换行或者元素不对齐的现象。

弹性布局采用rem/em等相对单位，rem/em是相对的单位会随着屏幕变化而变化。

修改收货地址

比如说，我在编写类似菜单的布局时，“修改地址”一栏就出现了这种现象，当我把想要向右浮动的元素（向右的箭头）在代码中调整到个元素位置是就解决了float换行的问题。

由于各个浏览器在样式方面都有一些异，还有一种情况就是，向右浮动的元素宽度不够时也会出现换行的问题，这个时候只要修改宽度就可以解决。

接下来总结一下查资料过程中学到的float属性相关特点：

（1）float在css中属于一种浮动的定位属性

1. float框可以左右浮动，直到它的外边缘遇到包含框或者另外一个浮动框；

2. 浮动框脱离了文档的常规流，文档的常规流就会忽略浮动框的存在；

3. 浮动框不会影响到块级框的布局，但会影响到内联框的排列；

上面的那种情况其实就是浮动框影响了内联框的一种表现。

html怎么把三张放在一行,然后下面加文字？