html5弹性布局有什么优点和缺点,css flex布局的优缺点是什么

css flex布局的优点:flex布局使用方便，根据flex规则很容易达到一定的布局效果。css flex布局的缺点:浏览器兼容性差，只能兼容ie9及以上。

推荐:css视频教程

1.什么是flex布局？

官方声明:Flex是Flexible Box的缩写，意思是“灵活布局”，用于为Box模型提供最大的灵活性。任何容器都可以指定为灵活布局。

民间说法:flex是一种布局，类似于block、inline-block等。

Flex是一种布局方法，用于确保页面需要适应不同的屏幕大小和设备类型时，元素具有适当的行为。

flex Box模块旨在提供一种更有效的方法来制作、调整和分发容器中的项目布局(基于一维)，即使它们的大小未知或动态。

优点:使用方便，根据flex规则很容易达到一定的布局效果。

缺点:浏览器兼容性比较差，只能兼容ie9及以上；

2.flex中涉及的概念

Flex布局的主要思想是使容器能够改变其宽度、高度(甚至顺序)，并以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器扩展子项目(伸缩项目)以填充可用空间，或者收缩子项目以防止容器溢出。

flex的基本功能是让布局更简单，比如“垂直居中”等等。当然，还有更多。要搞清楚Flex的功能，首先要了解一些概念。

具有灵活布局的元素被称为灵活容器，或简称为“容器”。它的所有子元素自动成为容器成员，这被称为弹性项，或简称为“项”。

默认情况下，容器有两个轴:水平主轴和垂直横轴。主轴的起始位置(与机架的交点)称为主起点，终点位置称为主终点；。横轴的起始位置称为十字起点，结束位置称为十字终点。默认情况下，项目沿主轴排列。单个项目占用的主轴空间称为主尺寸，占用的横轴空间称为十字尺寸。只要记住“容器”、“物品”、“主轴(横轴)”和“横轴(纵轴)”的含义和方向就行了。

3、容器的属性

3.1弯曲方向

伸缩方向决定了主轴的方向(即物品的排列方向)。它有四个可能的值:行(默认值):主轴是水平的，起点在容器的左端。 row-reverse:主轴水平，起点在容器右端。-4列:主轴垂直，起点在容器上边缘。-5柱-反转:主轴垂直，起点在容器下缘。

3.2软包

默认情况下，容器中的所有项目都排成一行，flex-wrap定义了如果一行不合适，如何换行。有三种可能的值:nowrap(默认):不换行。 wrap: wrap，第一行在顶部。 wrap-reverse: wrap，第一行在底部。

3.3柔性流

flex-flow属性是flex-direction属性和flex-wrap属性的简称，默认值是row nowrap。

3.4对齐-内容对齐-内容定义项目在主轴上的对齐。有五种可能的值:flex-start:与主轴的起始位置对齐，即从主轴的起始位置开始排列。如果使用伸缩方向属性来更改主轴的方向，项目的排列也会发生变化。

。容器{ display:flex；弯曲方向:行；内容:flex-start；}12345

。容器{ display:flex；弯曲方向:行反转；内容:flex-start；}12345 flex-end:与主轴的末端位置对齐，即从主轴的末端位置开始排列。和flex-start一样，也和flex-direction有关。

。容器{ display:flex；弯曲方向:行；调整内容:灵活结束；}12345

中心:中心

。容器{ display:flex；弯曲方向:行；内容:居中；}12345

间距:如果有两个以上的项目，容器主轴的开始和结束位置分别为一，其他项目均匀排列，项目之间的间隔相等。排列顺序也与伸缩方向有关。如果只有两项，每边一项。如果只有一个项目，它将只排列在容器主轴的开始141空间-周围:每一个项目的两边之间的间隔相等。因此，项目之间的间隔是项目和边框之间的间隔的两倍。排列顺序也与伸缩方向有关。如果只有一项，则安排在中间。

3.5对齐项目属性

align-items属性定义项目在横轴(纵轴)上的对齐方式。可以取五个值。具体的对齐方式和横轴的方向有关，假设横轴是从上到下的。Flex-start:横轴起点对齐。 flex-end:横轴的端点对齐。中心:横轴的中点对齐。基线:项目第一行文本的基线对齐方式。 stretch(默认值):如果项目的高度未设置或设置为auto，它将占据整个容器的高度。

3.6对齐-内容属性

对齐内容属性定义多轴(多行)的对齐方式。如果项目只有一个轴(一条线)，此属性无效。如果弹性方向的值为列，则此属性定义多列的对齐方式。如果该项只有一列，则该属性不能为左或右。拉伸(默认值):多条线占据整个横轴。 flex-start:与横轴的起点对齐。 flex-end:与横轴的端点对齐。中心:与横轴的中点对齐。间距:与横轴两端对齐，轴间距均匀分布。空间环绕:每个轴两侧的间隔相等。因此，轴之间的间隔是轴和框架之间的间隔的两倍。

四.项目的属性4.1订单属性

。项目{订单:& ltinteger&gt。；}123order属性定义项目的顺序。值越小，排名越高，默认值为0。

4.2弹性增长属性

。项目{ flex-grow:& lt；number&gt。；}1234flex-grow属性定义项目的放大倍数，默认值为0。如果所有项目的伸缩值相同，则主轴上的宽度以项目宽度为最小值均匀分布。如果没有为项目设置宽度，所有项目将平均分配主轴上的剩余宽度(额外空间)。如果项目的伸缩值不同，则是根据相应的比例分配主轴上的剩余宽度(额外空间)。按项目设置的宽度是最小值。如果项目设置为最大宽度，则扩大的宽度不会超过该值。

4.3伸缩属性

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

。项目{ flex-shrink: &lt。number&gt。；}123如果所有项目的flex-shrink属性为1，则当空间不足时，它们将被同等地缩小。如果一个项目的flex-shrink属性为0，而所有其他项目为1，则前者在空间不足时不会收缩。如果容器容器设置的flex-wrap没有足够的空间，如果超出，它将自动换行。所以此时设置flex-shrink不起作用。负值对此属性无效。

4.4弹性基础属性

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

。项目{ flex-basis: &lt。长度&gt。|自动；}123可以设置为与width或height属性相同的值(例如350px)，项目会占用固定的空间。

4.5弹性属性

flex属性是flex-增长、flex-收缩和flex-basis的缩写，默认值为0 1 auto。最后两个属性是可选的。

。项目{ flex:none |[& lt；'灵活发展& # 39；&gt。& lt'伸缩收缩。&gt。？| | & lt'弹性基础& # 39；&gt。]}123此属性有两个快捷方式值:自动(1 1自动)和无(0 0自动)。建议先使用这个属性，而不是分别编写三个单独的属性，因为浏览器会计算相关的值。如果伸缩基数之和大于父代的宽度，子代将被压缩，最后选择伸缩来进行压缩计算

加权值= son1+son2+...+sonn；

那么压缩后的计算公式是

压缩宽度w =(子元素弹性基值*(弹性收缩)/加权值)*溢出值

如果弹性基础的总和小于父宽度，剩余宽度将基于弹性增长值的总和；

扩展宽度w =(子元素伸缩增长值/所有子元素伸缩增长之和)*残值

4.6自对齐属性

自对齐属性允许单个项目具有不同于其他项目的对齐方式，并且可以覆盖对齐项目属性。默认值为auto，这意味着继承父元素的align-items属性。如果没有父元素，就相当于拉伸。

。项目{ align-self:auto | flex-start | flex-end | center | baseline | stretch；}有关编程的更多知识，请访问:编程教学！！这是css灵活布局的优点和缺点的细节，等等