Flex弹性布局有什么作用,flex布局特性,flex弹性布局详解

它是flex Box的缩写，意思是灵活的布局，用于为盒装型号提供最大的灵活性。今天我就通过这篇文章给大家详细介绍一下flex柔性布局的相关知识。有兴趣的朋友来看看吧。

初了解

学习之前要先了解柔性布局的概念。

Flex Box代表flexible box，意为灵活的布局，用于为盒装型号提供最大的灵活性。

任何容器都可以被指定为flex布局。方框{

显示器：flex

}

当然，行内元素也可以使用flex布局。方框{

显示：内嵌-伸缩；

}

Webkit内核浏览器必须以-webkit为前缀。方框{

显示：-WebKit-flex；/*游猎*/

显示器：flex

}

注意：设置为灵活布局后，子元素的浮动、清除和垂直对齐属性将无效。

基本概念

具有Flex布局的元素被称为Flex容器，或简称为“容器”。它的所有子元素都自动成为容器成员，这被称为Flex items，或简称为“items”。

默认情况下，容器中有两个轴：水平主轴和垂直横轴。主轴的起始位置(与边界的交点)称为主起点，结束位置称为主终点；横轴的起始位置称为十字起点，终点位置称为十字终点。

默认情况下，项目沿主轴排列。单个项目占用的主轴空间称为主尺寸，单个项目占用的横轴空间称为十字尺寸。

请记住这些基本概念。下面讲到属性的时候就不赘述了！

属性

容器属性(container)

flex-direction justify-content align-items flex-wrap align-content flex-flow

1 .弯曲方向

默认情况下，伸缩项沿主轴从主起点到主终点排列。

伸缩方向决定主轴的方向，有四个值：行(默认值)、行反转、列和列反转。方框{

flex-direction:行|行-反转|列|列-反转；

}

行(默认):主轴水平，起点在左端。

排-反：主轴水平，起点在右端。

柱：主轴垂直，起点在上沿。

列-反：主轴垂直，起点在下缘。

2 .调整内容

Justify-content确定伸缩项在主轴上的对齐方式

弹性起点(默认):与主起点对齐。

弯曲端：与主端对齐

居中：居中

间距：间距：伸缩项相等，与主起点和主终点对齐。

等间距：伸缩项之间的距离相等，伸缩项与主起点和主终点之间的距离等于伸缩项之间的距离。

间距：伸缩项伸缩项之间的距离相等，伸缩项与主起点和主终点之间的距离等于伸缩项之间距离的一半。

该属性的作用主要是排列主轴的项目位置。

当然，你可以自己尝试这些属性，这里就不一一尝试了，但是注意，这些都是容器的属性，要写在容器的css里面！

3 .对齐项目

确定横轴上伸缩项目的对齐方式。

正常：在灵活布局中，效果与拉伸相同。

拉伸：如果项目没有设置高度，当flex项目在横轴方向的尺寸为auto时，它将自动拉伸以填充flex容器(或者换句话说，如果项目没有设置高度或者设置为auto，它将占据整个容器的高度。)

Flex-satrt:与十字线对齐

挠性端：与十字端对齐

中心：中心对齐

基线：与基线对齐

4 .柔性包装

确定flex容器是单行还是多行。

Nowrap(默认):单行

换行：多行

//这个用的比较少。

换行-反转：多行(与换行相比，交叉开始与交叉结束相反)

默认情况下，所有项目都排列在一行上(也称为“轴”)。flex-wrap属性定义在轴无法容纳时如何换行。

5对齐内容

确定横轴多行伸缩项的对齐用法类似于justify-content，一个是横轴。控制垂直轴

Stretch(默认值):类似于align-items stretch，当项目有高度时，它没有影响。

弹性起点：与十字起点对齐

挠性端：与十字端对齐

中心：中心对齐

间距：伸缩项目是等距的，并与十字线起点和十字线终点对齐。

空间事件：弹性项目弹性项目之间的距离相等，弹性项目与十字起点和十字终点之间的距离等于弹性项目之间的距离。

间距：伸缩项伸缩项之间的距离相等，伸缩项与十字起点和十字终点之间的距离等于伸缩项之间距离的一半。

6 flex-flow是flex-direction和flex-wrap的缩写。

也就是说，在使用这个属性的时候，可以使用上面两个的属性值，比如：flex-flow: row wrap;(水平排列，多行显示)。

flex 项目属性（item属性）

order flex-grow flex-shrink flex-basis align-self flex

1份订单

决定订单弹性项目的排列顺序(不常用)

可以设置为任意整数(正整数、负整数、0)，值越小，排名越高。

默认值为0

这个属性可以理解，但说实话，没怎么用过。

2自对齐

您可以通过align-self覆盖flex容器设置的align-items。

自动(默认):遵循flex容器的align-items设置。

拉伸、伸缩起点、伸缩终点、中心和基线的效果与对齐项目一致。

等效于继承父元素的align-items属性，如果没有父元素，等效于stretch。

3灵活增长

确定弹性项目如何展开。

它可以设置为任何非父数字(十进制，整数0)，默认值为0。

只有当flex容器在主轴方向上具有剩余尺寸时，flex-grow属性才有效。

如果所有灵活项目的总和小于1，则直接乘以剩余大小，即扩展大小，

如果超过1，扩展大小=剩余大小*灵活增长/总和

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

4伸缩

Flex-shrink(收缩)和flex-grow类似，一个扩展一个扩展。

它可以设置为任何非父数字(十进制，整数0)，默认值为1。

当flex项目在主轴方向超过flex容器的size flex-shrink属性时，将会生效。

如果所有伸缩项目的伸缩总和超过1，则每个伸缩项目的收缩大小为：

弹性项目超过了弹性容器的尺寸*收缩率/每个弹性项目的收缩率之和。

如果sum不超过1，则每个弹性项目的约定大小为：

尺寸=超出尺寸*伸缩值

收缩后伸缩项的最终大小不能小于最小宽度\最小高度。

有膨胀，自然就有收缩。flex-shrink属性定义了项目的收缩比例，默认为1，即如果空间不足，项目会收缩。

如果所有项目的flex-shrink属性为1，则当空间不足时，它们将按相等的比例缩小。如果一个项目的flex-shrink属性为0，而所有其他项目都为1，则当空间不足时，前者不会收缩。你可以自己试试。最后给出一个骰子布局的案例！

5弹性基础

用于设置主轴方向上伸缩项目的基本尺寸。

默认为自动，可以设置特定的宽度值。

决定弹性项目最终基本大小的因素，优先级从高到低。

最大宽度\最大高度\最小宽度\最小高度

弹性基础

宽度\高度

内容本身的大小

flex-basis属性定义在分配额外空间之前项目占用的主要大小。根据这个属性，浏览器计算主轴是否有多余的空间。它的默认值是auto，这是该项目的原始大小。还可以设置和width、height一样的宽度和高度，也就是说item会占用固定的空间！

6 flex

是flex-grow | | flex-sh ink | | flex-basis的缩写。

可以按上述顺序指定1 2 3个值！默认值为0 1自动。项目{

flex:none |[' flex-grow ' ' flex-shrink '？|| '弹性基础']

}

注意：

该属性的默认值为0 1 auto(注意顺序)，最后两个属性是可选的。

该属性有两个快捷方式值：自动(1 1自动)和无(0 0自动)。

如果需要这三个属性，建议用flex代替三个单独的属性，因为浏览器会计算相关的值。

骰子布局实践

光说不练假把式，手撕代码真功夫！

下面利用弯曲写了几个骰子布局，可以参考一下！

！文档类型超文本标记语言

超文本标记语言

头

meta charset='utf-8 '

标题/标题

style type='text/css '

#容器{

背景色：# CCCCCC；

高度：600像素

宽度：500像素

/* flex */

显示器：flex

对齐-内容：空间-均匀；

对齐-项目：居中；

}。项目{

背景色：黄色；

宽度：100像素

高度：100像素

}

/* 单点*/。一个

/* 对点使用弯曲布局*/

显示器：flex

对齐-内容：居中；

对齐-项目：居中；

}

/* 点*/。第一项{

显示：块；

高度：20px

宽度：20px

背景色：# 1890FF

边界半径：50%;

}

/* 三点*/。两个

显示器：flex

justify-content:space-between；

}。两个跨度

边距：2px

显示：块；

高度：20px

宽度：20px

边界半径：50%;

背景色：# 1890FF

}。两个2{

自我对齐：居中；

}。两个3{

自我对齐：柔性端；

}

/* 五点*/。三个

显示器：flex

justify-content:space-around；

}。三跨

显示：块；

高度：20px

宽度：20px

边界半径：50%;

背景色：# 1890FF

}

#三_一，#三_三{

填充：2px

显示器：flex

伸缩方向：列；

justify-content:space-between；

}

#三_二{

显示器：flex

伸缩方向：列；

对齐-内容：居中；

}

/* 六点*/。四个

显示器：flex

justify-content:space-around；

}。四个跨度

显示：块；

高度：20px

宽度：20px

边界半径：50%;

背景色：# 1890FF

}

#四1,#四2{

填充：2px

显示器：flex

伸缩方向：列；

justify-content:space-between；

}

/风格

/头

身体

div id='容器'

！-一个点居中-

div class='item one '

span class='item-one'/span

/div

！-三点-

div class='第二项'

span class='two1'/span

span class='two2'/span

span class='two3'/span

/div

！-五点-

div class='第三项'

div id='three_one '

span/span

/div

div id='three_two '

span/span

/div

div id='three_three '

span/span

/div

！-六点-

div class='第四项'

div id='four1 '

span/span

/div

div id='four2 '

span/span

/div

/body

/html

测试结果

到此这篇关于最详细完整的弯曲弹性布局的文章就介绍到这了，更多相关弯曲弹性布局内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

Flex弹性布局有什么作用,flex布局特性,flex弹性布局详解

目录

初了解

基本概念

属性

容器属性(container)

flex 项目属性（item属性）

骰子布局实践

相关文章阅读