flex布局优缺点（小程序: 三栏布局的五种实现方式及优缺点）

flex-flow属性是flex-direction和flex-wrap属性的复合属性 flex布局中子元素也存在着相对应的一些属性 flex属性定义子元素分配 剩余空间,flex布局中默认是不换行的,设置很方便. 但是脱离文档流的, 可能会造成重叠元素 在flex布局不兼容的时候,任何一个容器都可以指定为flex布局 在flex布局中,子元素就会跟着作为主轴的来排列布局,一个flex一次只能处理一个维度上的元素布局,采用flex布局的元素,align-self属性允许单个的子元素与其他子元素不一样的对齐方式。

本文目录

• 小程序: 三栏布局的五种实现方式及优缺点
• 各种网页设计布局的优缺点
• css中，用flex和百分比优势劣势
• CSS布局：float、position、flex、grid
• 请问，css中Float和flex布局的优缺点
• Flex布局：Flex布局
• flex布局
• 【归纳】flex布局
• Flex布局详解（一）
• CSS3伸缩布局

小程序: 三栏布局的五种实现方式及优缺点

浮动布局的优点就是比较简单，兼容性也比较好。 缺点是浮动元素是脱离文档流，要做清除浮动，否则可能会出现高度塌陷等问题。 绝对定位布局优点: 很快捷，设置很方便. 但是脱离文档流的, 可能会造成重叠元素 在flex布局不兼容的时候，可以尝试表格布局。 CSS基础（float属性与清除浮动） 三栏布局的5种解决方案及优缺点

各种网页设计布局的优缺点

静态布局也叫做固定布局，网页内容区采⽤绝对宽度，网页内每个模块的尺寸大小固定，一般整体在浏览器内居中显示，并会设置最小宽度min-width，当分辨率小于最小宽度就会出现滚动条，如果大于最小宽度则内容居中外加背景 。

应用场景 目前大部分的高校官网、医院官网、政府网站等都是静态布局，而且设计风格上也很老旧，当然并不是说静态布局的风格就是老旧，这个布局和设计风格没有多大关系，有很多新闻门户类、企业官网等网站采用静态布局，同样也很出彩。 优点 这种布局方式对设计师和前端来说都是最简单的，不用去考虑兼容性等问题。设计和开发成本低，后期维护成本低 缺点 在小屏上有可能出现横向滚动条，在大屏上会出现大量的空白，不能根据用户的屏幕尺寸做出不同的表现，用户体验比较差。

流式布局是指页面按照百分比%定义宽度（也就是长度单位不是我们平常使用的px，而是百分数），来适配不同的屏幕分辨率，在不同的分辨率下网页布局保持不变，一般搭配min-、max-属性来控制尺寸流动范围，以免过大或者过小影响展示和阅读，页面内元素的高度和文字大小往往px来固定住，方便页面排版和阅读。流式布局的特点是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

应用场景 流式布局典型的代表是栅格系统，一般页面中采用百分比定宽的部分都可以看做是流动布局的属性。目前大部分网页为了实现更好的视觉效果都会全局或局部使用流式布局。 优点 在不同分辨率屏幕上能够很好的展示页面元素，如果设计得当，流动布局能避免在小屏幕上出现水平滚动条，对于差别不是很大的屏幕分辨率十分友好。 缺点 当屏幕分辨率差异过大时，因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，有些页面元素宽度被拉的很高，页面缩小后，一些字或者图片或者图表等会产生堆叠，显示效果不太好控制。

响应式布局是指网页分别为不同的屏幕分辨率定义不同的布局，同时在每个布局中，各元素大小采用百分比定义宽度，即页面元素宽度随着窗口调整而自动适配。可以看做是定义了几个不同尺寸的流式布局。

优点 能够适应pc、pad和移动端，在任何尺寸的屏幕上都能呈现完美的视觉效果 缺点 要匹配足够多的屏幕大小，需要设计多个版本，设计和开发工作量大

弹性布局翻译过来不是em/rem layout ，因为弹性布局采用的单位是em或者rem，为了直观，所以直接采用了单位缩写去区分。em和rem是一个相对长度单位，页面内各元素的尺寸采用em/rem做单位，em是相对其父元素大小，rem是始终相对于html大小，即页面根元素。

优点 弹性适配不同的分辨率，视觉效果比较好 缺点 em以父节点font-size大小为参考点，进行任何元素设置，都需要知道他父元素的大小，容易造成页面排版混乱，rem支持的浏览器比较少。

个人理解的，felx布局主要是用来定义页面内某些元素相对于父级元素的对齐、排序、分布等排版方式，通过调整父级内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。

优点 能够很好的契合移动端，无需考虑分辨率问题，移动端flex布局占据主流 缺点 PC端网页兼容性不好，ie浏览器必须是10.0版本以上；对设计稿要求很高，需要是有规律的设计稿，比如栅格系统；网页内容较多时，flex布局不太好控制。

css中，用flex和百分比优势劣势

flex更好点,由源代码进行控制布局,一般不会乱掉,但是百分比有些浏览器对边框,和间距定义不同,再加上有的时候你需要给标签加上一些px,会导致百分比不能按预想的样子出现,而且不能微调百分比的设定,不够灵活,相对flex布局就好多了,由源代码进行控制,也不担心额外像素,只要浏览器兼容就可以

CSS布局：float、position、flex、grid

CSS是前端基础技能之一，而CSS最重要的功能就是网站布局。 CSS布局方式有很多，从远古时代的table（表格）布局--》float（浮动）布局--》position（定位）布局--》flex（弹性）布局--》grid（网格）布局（还未正式推出），下面咱们简单谈一谈各种布局的用法及其优缺点。 table布局就是将网站当做一个表单来做，这里不做展开，因为现在基本不这么用了。 float：浮动。float刚开始并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题的。 如下图： 这种常见的图文效果，没有float之前是很难达到的。有了float之后只需要加一个float：left，轻松搞定。 ‘咦，如果float可以处理图文的问题，那用来布局不也可以吗？’，后来有人用float试着用于网页布局，还真的可以。 网页中最常见的布局如下： 用float做 比table布局要方便不少，不过float随之而来的带来了 “浮动高度塌陷”的问题： 如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0； 引申：网页元素一般分为 普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流》浮动流》普通流。 之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。 position：定位；顾名思义，就是确定位置。position同样可以用做网页布局。 同样的效果 不过position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。 关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以html为父元素的定位。 flex：弹性；弹性布局很好的解决了float和position的问题，非常好用。 使用方法： 在父元素使用 display:flex;确定弹性作用的范围。 然后 justify-content：center（space-around，space-between等）；水平方向布局； align-items:center(flex-start,flex-end等);垂直方向布局； 不过flex不兼容IE8及以下的浏览器。 大部分情况下flex布局已经能满足需要，不过flex只能用作一维布局，也就是说，flex一次只能作用于一条线。如果想要进行二维布局，必须翻转坐标二次弹性，这样会显得不够优雅，这时候grid（网格）布局就发展起来了。 grid布局用法和flex相似，但是作用于二维布局。 先在父元素使用 display:grid;确定网格作用范围； 然后 grid-template-columns: 40px 50px auto 50px 40px;（行） grid-template-rows: 25% 100px auto;（列） 等等属性，这里只简单介绍，大家了解有这个东西就行。 在现实工作用，以flex为主，position辅助已经足够应对所有问题。

请问，css中Float和flex布局的优缺点

两者是有绝对的区别的，float是时元素浮动，而position是用来给一个元素定位的。1、float的定义和常见用法：float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。、实例如下：float属相使得块级元素的div可以在同一行并排，效果如下：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。其属相值有：绝对定位的实例：

Flex布局：Flex布局

传统布局：

flex布局：

使用范围： 1、如果是PC端页面布局，建议使用传统布局 2、如果是移动端或者不考虑兼容性问题的PC端，建议使用flex弹性布局

flex意为弹性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

在flex布局中，有主轴和侧轴的概念之分，即所谓的行与列，默认的主轴方向是从左往右，默认的侧轴方向是从上往下。flex-direction属性决定主轴的方向，也就是决定着子元素的排列方向，其中，主轴和侧轴是会变化的，就看flex-direction设置谁作为主轴，子元素就会跟着作为主轴的来排列布局。

设置侧轴排列

justify-content属性定义了项目在主轴上的对齐方式，使用前提必须确定好谁是主轴.

默认情况下，子元素都排在一条线上（主轴），flex-wrap属性定义，flex布局中默认是不换行的。意味着随着子元素不断增加，会直接改变子元素的宽高，不断地挤在一行上。

align-items设置侧轴上的子元素的排列方式(单行的)，这个属性是控制子元素在侧轴(默认是y轴)上的排列方式，在子元素为单个元素的时候去使用。

设置子元素在侧轴上的排列方式，并且只能用于子元素出现在换行的情况中，在单行下是没有任何效果的。

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex布局中子元素也存在着相对应的一些属性

flex属性定义子元素分配 剩余空间 ，用flex来表示占的多少份，默认为0 针对这个，可以先了解有名的CSS布局 圣杯布局 以及 双飞翼布局 ,大致的效果为两边盒子固定，中间自适应。使用flex布局来做的话，就是去处理剩余空间的份数。

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

order去控制子元素的排列顺序，数值越小的，排列越靠前，默认为0

首先给每个子元素设置一个order值，需要调到前面的，单独提出来将order值设小点即可，想要放到后面order值设大点即可。

flex布局

1 .1维布局，一个flex一次只能处理一个维度上的元素布局，一行或者一列。 2 .如果不规定换行，就算是超了，会等比压缩缩小，而不是自动换行，想要换行必须要使用felx-wrap 3 .任何一个容器都可以被指定为flex布局 4 .行内元素可以被指定为inline-flex 5 .设置flex之后，子元素的float,clear，vertical-align 1 .在flex布局中，一个Flex子项的宽度是由元素自身尺寸即flex-basic设置的基础属性，以及外部填充flex-grow,收缩flex-shrink，还有最大，最小尺寸限制这5个共同决定的 2 .基础尺寸：flex-basic,box-sizing盒模型共同决定 3 .弹性增长;flex-grow属性，弹性收缩；flex-shirk属性 4 .最小尺寸min-wdith,max-width等css属性，min-content最小内容尺寸,width也属于最小尺寸了 5 .在flex布局中，子项设置width是没有直接效果的.实际设置的width，虽然看起来生效了，但是效果是flex-basic的作用 6 .flex-basic的默认值是auto，也就是完全根据子列表项自身尺寸渲染(min-width》||max-width》width》content-size) 7 .是盒模型，元素自身尺寸特性，以及flex属性共同作用的结果。 最大最小尺寸限制》弹性收缩，弹性扩张》基础尺寸 1 .所以无论是什么布局min-width,max-width这种属性都拥有绝对** 1 .如果是数值，比如flex:1。chrome里面是flex-basis:0%,flex-grow:1,flex-shirk:1. 2 .如果是长度值，比如flex:100px。还是chrome，flex-basis:100px,flex-grow:1,flex-shirk:1。 1 .2个参数，3个参数，以及initial,auto,none这些关键字，没有记的必要，直接分开写的清清楚楚不就好了，非要用一些自己不是很明白的参数在那里瞎搞 2 .flex默认值 0 1 auto 。也就是不放大，等比缩小，用原来的大小 1 .分配固定的家产数量 2 .如果同时设置width，会被忽略，但是max-width，min-width，优先级比flex-basis更高。但是最高不要用这个值，也就是使用宽度直接使用flex-basis就可以，不需要单独给子项固定width，这样会让人很疑惑。甚至根本不需要min-width/max-width这些属性 3 .flex-basic是作用在content-box上的.设置的width+padding+border 。如果给他设置box-sizing:border-box:那么宽度会减小，减小的长度是padding-left+padding-right+border*2的长度 4 .flex-basis:支持一堆关键字，但是好多都不支持 1 .家产任然后赋予的时候在怎么分。默认是0.多余空间不分配 1 .家产剩余不够分的时候怎么分。默认是1，空间不足会分配 1 .每一个item固定大小100px。只有flex-basis：100，其余两属性没有，但是宽度不足，又没有换行的时候，宽度不够，所有都是会一起缩小的，并不是最小宽度，这是因为flex-shirk:默认是1.所以属性一定还是设置的 2 .每一个item最小宽度是100，多余宽度等扩大，但是要有间距.因为会等比扩大，所以间距要自己设置，这里可以设置padding。还有一个重要的就是background-color的计算和bos-sizing没有关系。所以这里加padding没啥用，背景颜色还是在原来的范围内显示，只是content-box会变化。所以这里要加margin,但是marginzhe这里也有一个坑点，flex布局下不会自动margin折叠，所以不能简单的margin：10，这样各个item的间距不一样 1 .flex-direction:决定主轴的方向 从左到右非别是 2 .flex-wrap:默认情况下，所有项目都是排在一条线上，就算是超了，默认情况下都是按照1:1缩小，而不是机灵的自动换行，必须使用这个属性才会自动换 3 .flex-flow:上面那俩属性的合并值。 4 .justify-content:主轴上项目的对齐方式。如果是横向主轴，那么是左右的对齐方式，如果是竖向主轴，那么就是上下的对齐方式 5 .align-items:交叉轴上的对齐方式，也就是上下对齐方式.具体的对齐方式和交叉轴有关系 6 .align-content属性：多跟轴线的对齐方式,如果项目只有一根轴线，这个属性 不起作用 1 .order：本来列表是按照实际的渲染顺序来显示的，如果单独给某个属性设置这个值，数字越小，排列越靠前。 2 .flex-grow 3 .flex-shrink 4 .flex-basis 5 align-self:重点。覆盖align-items属性，允许单个项目和其他有不一样的对齐方式.会覆盖align-items属性。

【归纳】flex布局

说到flex布局，在我之前的影响中，只知道这是一种较传统布局较方便的布局，这种布局对我来说是全新的。在flex布局出现之前，我们使用的传统布局主要有以下几种： 这些传统的布局方式虽然可以满足我们的很多需求，但是也并不方便，比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”，flex布局有以下几个特点： 接下来就将对flex布局的几个重要知识点进行归纳。 采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。 如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴（main axis），纵向的称为侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size，在侧轴方向的高度叫做cross size。 flex container（flex容器）有如下六个属性： 该属性主要有以下值： 该属性主要有以下值： 默认值为row nowrap，可以以如下方法设定该属性： 该属性主要有以下值： 该属性主要有以下值： 该属性主要有以下值： flex item（子元素）有如下六个属性： 该属性默认值为0。 如果所有子元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。 该属性默认值为1。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来宽度。 默认值为0 1 auto。可以以如下方式设定该属性： 数值越小，排列越靠前，默认为0。 即不使用父元素决定的对齐方式，自身设定一个对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧 如果内容被修剪，需要浏览器显示滚动条，以便查看剩余内容，可以使用 over-flow:auto; 实现手机上中下布局： 以上就是我此次关于flex学习的一些记录。可以看出，这次学习是围绕着阮一峰的一篇关于flex的博客展开的，他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外，我在这里推荐两个关于flex学习的小游戏，寓教于乐，十分有趣。 博客原地址： http://franko.top/1809/20180925A/

Flex布局详解（一）

Flex布局的特点： 1、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。 2、flex布局可以实现空间自动分配，自动对齐（flexible：弹性、灵活） 3、flex适用于简单的线性布局，更复杂的布局要交给grid布局 图解重点理解1和2里面都是叫flex item，包裹1和2边框叫flex container。其次要注意是主轴方向不一定是横的，也可以是竖的，侧轴也是一样。 （1）、flex-direction常用得属性值有 row 、 row-reverse 、 column 、 column-reverse ,默认情况下属性值是 row 。 HTML CSSCSS （3）、flex-flow其实是flex-direction和flex-wrap两个缩写，其中属性值可以搭配使用。 CSSCSS

CSS3伸缩布局

我们知道，标准流中的，父容器里的多个块级的子元素会默认从上往下排列。但我们如果使用伸缩布局，就可以使子元素们在不脱离标准流的情况下，水平方向上，从左至右排列 flex 布局的优势 1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。 2、flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。 但flex 的缺点在于，它不支持低版本的 IE 浏览器。 我们来明确几个概念 弹性盒子 弹性盒子指的是使用 display:flex 或 display:inline-flex 声明的父容器。 子元素/弹性元素 子元素/弹性元素指的是父容器里面的子元素们（父元素是弹性盒子）。

使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。我们一般使用display:flex。 1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配 min-width 最小值 min-width: 280px 最小宽度 不能小于 280 max-width: 1280px 最大宽度 不能大于 1280

flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：

flex-direction这个属性默认子元素从左到右排列的。

子盒子如何在父盒子里面水平对齐方式如下所示，

子盒子如何在父盒子里面垂直对齐（单行），如下所示

flex-wrap控制是否换行，如下

flex-flow是flex-direction、flex-wrap的简写形式

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。