display flex布局（css之dispaly:flex;多行多列）

本文目录

• css之dispaly:flex;多行多列
• Vue 中 Flex布局
• CSS弹性布局
• Flex布局
• 关于手机端的flex布局
• 微信小程序flex布局
• Flex布局怎么用常用的都有哪些属性
• html布局的常用的四种实现方式
• 移动端的特点、百分比布局、flex布局

css之dispaly:flex;多行多列

最近老是遇到布局问题，尤其是在垂直居中布局上。之前不了解display：flex;最近看了看书，简单的整理了下，于是就产生了这篇文章 flex弹性布局可以简便，完整，响应式的实现各种页面的布局，而且现在也得到了所有浏览器的支持，实在是布局很便利的工具呢。 一、flex布局的基本概念 1.任何一个元素使用display：flex属性后都可以看做一个flex容器；2.它的子元素变成flex容器中的项目，称为flex item；3.flex容器里面默认存在两根主轴：水平的主轴和垂直的轴 ，用这两根轴将容器分成多行 二、flex容器的基本属性 1.flex-direction属性：表示项目的排列方式或者说主轴的方向，有以下四个值 row:默认值，主轴为水平方向，从左向右排列 row-reverse:主轴为水平方向，从右向左排列 column:主轴为垂直方向，从上往下排列 column-reverse:主轴为垂直方向，从下往上排列 2.flex-wrap属性：默认情况，所有的子元素都在一行，此属性主要定义如果不在一行时子元素如何排列，有如下三个值： nowrap：不换行 wrap：换行 wrap-reverse：换行，第一行在下方，第二行在第一行上面依次类推 3.flex-flow：集1.和2.属性于一身，意思就是这个属性可以直接指定上面两个属性的值，默认值为：row nowrap 4.justify-content：定义子元素在主轴上的对齐方式，有以下五个值： flex-start：左对齐 flex-end：右对齐 center：居中 space-between：两端对齐 space-around：每个项目两侧间隔相等 5.align-items属性：定义子元素在水平轴和垂直轴的交叉轴上如何对齐，有以下五个值： flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐 center：交叉轴的中点对齐 baseline：项目的第一行文字基线对齐 strecth:默认 6.algin -content属性：定义多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用，该属性有以下六个值： flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐 center：交叉轴的中点对齐 space-between：与交叉轴的两端对齐，轴线间的间隔平均分布 space-around：每根轴线的两侧的间隔都相等 strecth：默认，轴线占满整个交叉轴 三、子元素（项目）的属性 1.order属性：定义子元素的排列顺序，数值越小，排列越靠前，默认为0 2.flex-grow属性：定义项目的放大比例，默认值是0，就是如果存在剩余空间，也不放大。 若所有子元素的flex-grow值为1，则子元素等分剩下的空间 若一个元素的属性值为N，剩下值为1，则属性值为N的元素等分的空间是1的N倍 3.flex-shrink属性：定义了项目的缩小比例，默认为1，就是如果空间不足，该项目将缩小 若所有子元素此属性为1，空间不足时，将会被等比缩小， 若有元素属性值为0，即使空间不足，也不会被缩小 4.flex-basis属性：定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto原本的大小，也可以设置px结尾固定大小 5.flex属性：是2.3和4属性的简写，默认值为：0 1 auto，可以只写第一个值，后面两个是可选参数；该属性的两个快捷值：auto（1 1 auto）和none（0 0 auto） 6.align-self属性：此属性允许单个子元素与其他子元素不一样的对齐方 auto：默认值，表示继承父元素的属性， 其他：align-items值相同 四、一起来试一试

Vue 中 Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

display: flex; display: inline-flex;

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

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

以下6个属性设置在容器上。

flex-direction属性决定主轴的方向（即项目的排列方向）。

它可能有4个值。

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性定义了项目在主轴上的对齐方式。

它有5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

align-items属性定义项目在交叉轴上如何对齐。

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取6个值。

小结： justify 是对主轴对齐方式。 align开头的都是对交叉轴进行排列的项目。

以下6个属性设置在项目上。

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

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

接下来需要添加一些Css弹性盒子：桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解

参考文章： https://blog.csdn.net/m0_37058714/article/details/80765562

CSS弹性布局

CSS2.1定义了 4 中布局方式 给任意元素设置 display:flex,弹性布局就会被创建,flex 的子项会发生变化. flex-direction属性用来控制 flex 子项的整体布局方向,决定是从左往右排序.flex-dirction属性有以下语法 flex-wrap属性用来控制 flex 子项单行显示还是换行显示,以及在换行显示情况下,没一行内容是否在垂直方向的反向显示. flex-flow属性是 flex-dirction属性和 flex-wrap属性的缩写.表示弹性布局的流动性特性 CSS 在 flex 中属性名称基本上是几个固定单词的组合,且这些单词在整个 CSS 世界中是通用的含义 justify-content 属性在弹性布局中常用的语法如下 align-item和 align-self属性的一个区别是 align-self属性是设置在具体的某个 flex 子项上,而 flex-items 属性是设置在 flex 容器上,器控制 flex 子项的垂直对齐方式,align-self默认值是 auto,其余的数据值个 align-items 属性值一致.属性如下 align-content属性和 align-items属性的区别在于 align-items属性设置的是每一个 flex 子项的垂直对齐方式,而 align-content 属性是将所有作为一个整体进行垂直对齐设置.align-content 属性如下所示 我们可以通过 order 属性来改变 flex 子项的顺序位置.order 属性越小优先级别越高 flex 属性是弹性布局的精髓,因此弹性布局就是 flex 属性的作用.flex 属性是 flex-grow flex-shinrk flex-basic这 3 个属性的缩写.我们先了解下flex 常用的几个声明 表示的是什么意思? flex-basic 属性用来表示基础宽度 flex-grow 属性表示宽度还有剩余的时候 flex-shrink 属性表示宽度不足的时候 flex:0等同设置 flex:0 1 0%,flex:none等同设置了 flex:0 0 auto. 如果没一行的行数是固定的,则可以使用两种方式实现最后一行对齐 要实现最后一行对齐,理论上最好使用 gap 属性设置间隙 如果每一行的行数不固定,则上面的方法都失效,需要使用其他的方式实现最最后一行对齐.可以使用空白标签进行填充占位,具体的占位数量由最多列数的个数决定

Flex布局

    Flex布局也称弹性布局（flexiblebox）模块，主要是为了提供一个更有效的方式对容器之间的各项内容进行布局。弹性布局的主要思想是让容器能根据需要改变项目的宽度和高度，以填满可用空 间，满足所有类型的显示设备和屏幕尺寸。因此弹性布局模块的大小是未知或者动态变化的。     采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。Flex布局比较适合用于小规模的布局，比如应用程序中的组件布局。Flex布局容器默认存两条轴：水平主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置与边框的交叉点叫作main start。结束位置叫作main end；交叉轴的开始位置叫作cross start，结束位置叫作cross end。项目默认沿主轴排列。 1.给父元素加上display:flex开始盒子布局 row    |    row-reverse    |    column    |    column-reverse （1）row（默认值）：主轴为水平方向，起点在左端。 （2）row-reverse：主轴为水平方向，起点在右端。 （3）column：主轴为垂直方向，起点在上沿。 （4）column-reverse：主轴为垂直方向，起点在下沿。 nowrap    |    wrap    |    wrap-reverse （1）nowrap：不换行 （2）wrap ：换行。第一行在上方 （3）wrap-reverse：换行。第一行在下方 flex-start    |    flex-end    |    center    |    space-between    |    space-around     （1）flex-start（默认值）：左对齐 （2）flex-end：右对齐 （3）center： 居中 （4）space-between：两端对齐，项目之间的间隔都相等 （5）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 flex-start    |    flex-end    |    center    |    baseline    |    stretch （1）flex-start：交叉轴的起点对齐 （2）flex-end：交叉轴的终点对齐 （3）center：交叉轴的中点对齐 （4）baseline: 项目的第一行文字的基线对齐 （5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 auto    |    flex-start    |    flex-end    |    center    |    baseline    |    stretch 该属性可取6个值，除了auto，其他都与align-items属性完全一致。 (完)

关于手机端的flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。使用 flex 布局首先要设置父容器display: flex，然后再设置justify-content:center实现水平居中，最后设置align-items: center实现垂直居中。 ex： 运行结果：justify-content和align-items是啥？哪里可以看出横向、竖向的语义？是的，flex 的确没有那么简单，这就要从两个基本概念说起了。 说来也不难，flex 的核心的概念就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含display: flex），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个，我们就先从常用的说起吧。 首先，我们先说说轴吧，理解了轴，在之后的例子中更更能理解属性。 如图所示，轴 包括 主轴 和 交叉轴，我们知道 justify-content 属性决定子容器沿主轴的排列方式，align-items 属性决定子容器沿着交叉轴的排列方式。那么轴本身又是怎样确定的呢？在 flex 布局中，flex-direction 属性决定主轴的方向，交叉轴的方向由主轴确定。2.1主轴 主轴的起始端由flex-start表示，末尾段由flex-end表示。不同的主轴方向对应的起始端、末尾段的位置也不相同。 向右：flex-direction: row向左：flex-direction: row-reverse向下：flex-direction:column向上：flex-direction:column-reverse交叉轴 主轴沿逆时针方向旋转 90° 就得到了交叉轴，交叉轴的起始端和末尾段也由flex-start和flex-end表示。 上面介绍的几项属性是 flex 布局中最常用到的部分，一般来说可以满足大多数需求，如果实现复杂的布局还需要深入了解更多的属性。容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。设置子容器沿主轴排列：justify-content justify-content属性用于定义如何沿着主轴方向排列子容器。flex-start：起始端对齐，例子：flex-end：尾端端对齐，例子：center居中对齐：space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。设置子容器如何沿交叉轴排列：align-items align-items属性用于定义如何沿着交叉轴方向分配子容器的间距。flex-start：起始端对齐flex-end：末尾端对齐center：居中对齐baseline：基线对齐，这里的baseline默认是指首行文字，即first baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。示例中我蓝色线标出来的为基线stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。（在不给元素设置固定高的情况下）在主轴上如何伸缩：flex子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由flex属性确定。 flex的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是none关键字。子容器会按照flex定义的尺寸比例自动伸缩，如果取值为none则不伸缩。 虽然flex是多个属性的缩写，允许 1 - 3 个值连用，但通常用 1 个值就可以满足需求，它的全部写法可参考下图。 单独设置子容器如何沿交叉轴排列：align-self每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器 align-items 属性完全一致，如果两者同时设置则以子容器的 align-self 属性为准 flex-start：起始端对齐flex-end：末尾端对齐center：居中对齐当然，baseline和stretch单独设置子容器的话，也是不受父容器影响的，在这就不举例子了。 目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

微信小程序flex布局

Flex布局：意为“弹性布局”，为盒模型提供巨大的灵活性 使用说明： 1. 任何容器都可以使用flex布局   display: flex; 2.行内元素可以使用flex布局   display: inline-flex; 外层flex容器的属性： 1.flex-direction属性   flex-direction: row | row-reverse | column | column-reverse; row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 2.flex-wrap属性  flex-wrap: nowrap | wrap | wrap-reverse; nowrap (默认值) ：不换行。 wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。 3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap flex-flow: 《flex-direction》 || 《flex-wrap》; 4. justify-content属性：定义item在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around; flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 5. align-items属性：定义项目在交叉轴上如何对齐 align-items: flex-start | flex-end | center | baseline | stretch; flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 6. align-content属性：定义多跟轴线的对齐方式，如果只有一根轴线则不起作用  align-content: flex-start | flex-end | center | space-between | space-around | stretch; flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。 项目item的属性 1. order属性：定义项目的排列顺序，数值越小越靠前，默认值为0，负数在0前面 order: 《integer》; 2. flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大  flex-grow: 《number》; /* default 0 */ 3. flex-shrink属性：定义项目缩小比例，默认是1，即如果空间不足，该item将缩小  flex-shrink: 《number》; /* default 1 */ 4. flex-basis属性：在分配多余空间之前，item占据的主轴空间（main size），默认值auto，即item本身大小 flex-basis: 《length》 | auto; /* default auto */ 5. flex属性：是flex-grow，flex-shrink，flex-basis的简写，默认值为0 1 auto，后面两个属性可选  flex: none | 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 6. align-self属性：允许单个item与其他item有不一样的对其方式，可覆盖align-items属性 align-self: auto | flex-start | flex-end | center | baseline | stretch;

Flex布局怎么用常用的都有哪些属性

Flex布局意为”弹性部分”，为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局（display:flex）；行内元素也可以使用Flex布局（display:inline-Flex）。设为Flex布局以后，子元素的float、clear和vertical-align属性都会失效。

html布局的常用的四种实现方式

需求 ：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应

将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况

正常的渲染效果如下所示：

第二种：绝对定位（position:absolute） 设置父盒子position:relative（相对定位）， 三个子盒子position：absolute, 左盒子left:0, 右盒子right:0; 中间盒子left:300px;right:300px

第三种：flex布局 父盒子 display:flex 左右盒子设置宽度：300px 中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩

第四种：grid布局 父盒子display: grid; grid-template-columns:300px auto 300px;(分割成3列，宽度分别为300px auto 300px) grid-template-rows:100px;(占一行，行高100px)

移动端的特点、百分比布局、flex布局

移动端特点 PC端网页和移动端网页的不同之处 PC屏幕大，网页固定版心 手机屏幕小， 网页宽度多数为100% 分辨率分类 物理分辨率是生产屏幕时就固定的，它是不可被改变的 逻辑分辨率是由软件（驱动）决定的 二倍图 能够使用像素大厨软件测量二倍图中元素的尺寸 l现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。 二倍图设计稿尺寸：750px 百分比布局 百分比布局， 也叫流式布局 效果： 宽度自适应，高度固定 flex布局 Flex布局/弹性布局： 是一种浏览器提倡的布局模型 布局网页更简单、灵活 避免浮动脱标的问题 给父元素添加 display: flex，子元素可以自动的挤压或拉伸 组成部分 1.弹性容器 2.弹性盒子 3.主轴