cssflex布局(css背景图片全屏铺满自适应)

很多朋友对于cssflex布局和css背景图片全屏铺满自适应不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！

html布局思路

定位布局：

主要使用position样式来进行定位元素，定位元素又可以分为绝对定位（position:absolute）和相对定位（position:relative），绝对定位的对象是脱离正常的文档流，使用top，right，bottom，left等属性进行绝对定位，其层次关系顺序可以通过z-index属性来定义。相对定位是遵循正常的文档流，top，right，bottom，left等属性在正常的文档流中进行偏移位置。

浮动布局：

主要是使用float样式来定义元素的浮动，浮动可以设为左浮动（float：left）右浮动（float：right）不浮动（float：none）当你设置了元素为浮动元素的时候元素对象的display会被自动忽略，所以浮动元素的大小由它所包含元素的大小决定。

如何清除元素的浮动的，我们可以使用clear元素来清除浮动，当clear：none的时候允许两边都可以有浮动对象、当clear：left的时候不允许左边有浮动对象、当clear：right的时候不允许有右浮动对象、当clear：both的时候不允许元素左右两边有浮动对象。

弹性布局：

弹性布局又称flex布局，可以用弹性布局来做相应式网站

flex布局怎么让盒子垂直水平居中

我们这里分为两种形式，一种是定元素宽高的情况下，另一种是不定元素宽高的情况下。

定元素宽高的情况下

a.绝对定位+负margin

利用绝对定位absolute和margin完成元素居中，具体例子如下：

给父元素添加相对定位，子元素添加绝对定位，利用margin负子元素宽高的一半，实现元素的居中，这种方法不常用，

优点：好理解，兼容性好

缺点：必需给定子元素的宽高

b.绝对定位+margin:auto

利用absolute绝对定位和margin:auto自动居中方法完成元素的居中，例子如下：

与上例子一样给父元素加相对定位，子元素添加绝对定位，在设置元素的左、右、上、下位置为零，再利用自动居中对齐的方法margin:auto,完成元素的垂直水平居中，这种方法常用

优点：简单易懂，兼容性好

缺点：代码量大，占内存

c.table-cell

利用css的table属性，完成元素的垂直居中，margin完成元素的水平居中，例子如下

设置父元素的元素类型为table-cell类型，设置表格的垂直对齐方式为居中，再给子元素添加margin:0auto完成元素的垂直水平居中，这种方法不常用，

优点：兼容性好

缺点：出来的太早，现在都不流行用了

d.translate

利用2d位移来完成元素的居中，例子如下：

只需操作子元素，给子元素添加transform属性，利用2d位移translate,分别向左向右移动父元素宽高度减自身宽高度的一半，完成元素的垂直水平对齐，这种方法不常用，

优点：代码简单

缺点：我们必须给定子元素的宽和高，否则无法完成元素居中

不定元素宽高的情况下

line-heght

给元素设置line-heght,也就是行高，完成元素的居中，具体例子如下：

我们给子元素设置行高，完成元素的垂直居中，再然后利用文本水平对齐方式text-align方法，完成水平居中，这中方法是最简单的，也是我们经常用的

优点：写起来简单，兼容性好

缺点：只适合单行文本的居中，多行文本不支持

b.绝对定位加translate

之前我们说过一个利用translate完成元素垂直水平的，这里就是在那种方法上的进一步改进，也就是可以，不用设置宽高，也能实现元素的垂直水平居中，用translate加绝对定位完成元素的居中，例子如下：

在这里，还有不同就是，我们translate里面可以直接用百分比完成位移，从而实现元素的垂直水平居中，这种方法常用（但是我不常用）

优点：代码简单，兼容性好

缺点：无

c.flex

flex形成弹性盒，我们利用弹性盒可以做很多事情，其中最主要的还是布局，当然这里我们就不详细说了，我们来谈谈如何使一个元素垂直水平居中，例子如下：

我们让父元素形成弹性盒子，再然后设置主轴对齐方式为居中对齐，侧轴对齐方式为居中对齐从而完成元素的垂直水平居中，这种方法经常用，

优点：代码简单易懂

缺点：PC端兼容性不好

d.flex+margin:auto

这种方法与上面那种不同的是，这里没用到弹性盒子里面的属性，而是用margin直接完成元素的居中对齐，例子如下：

让父元素形成弹性盒子，再然后给子元素添加margin:auto,完成元素的垂直水平居中，这种方法也常用，

CSS3中Flex弹性布局该如何灵活运用

前端爱好者，学习者可关注我，带你一起学习前端。

其实如何灵活应用Flex布局，那就要先知道它如何布局以及有哪些属性，说白了就是在一个容器呢把它的子项目均匀的排列在一起，然后再用属性指定容器内子项目的详细排列方式。

网页布局（layout）是CSS的一个重点应用。Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

基本概念

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

任何一个容器都可以指定为Flex布局。

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

容器属性

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-flow:<flex-direction><flex-wrap>;

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

4、justify-content属性

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

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属性定义项目在交叉轴上如何对齐。

align-items:flex-start|flex-end|center|baseline|stretch;

flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6、align-content属性

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

align-content:flex-start|flex-end|center|space-between|space-around|stretch;

flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。项目的属性

1、order属性

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

order:<integer>;

2、flex-grow属性

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

flex-grow:<number>;/*default0*

3、flex-shrink属性

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

flex-shrink:<number>;/*default1*/

4、flex-basis属性

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

flex-basis:<length>|auto;/*defaultauto*/

5、flex属性

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

flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]

6、align-self属性

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

align-self:auto|flex-start|flex-end|center|baseline|stretch;

更多的Flex布局应用可到W3C菜鸟教程查看，或者去张大神、阮一峰的博客查看，详细的很。

更多前端知识关注我，了解更多

flex布局优缺点

CSS3弹性盒(FlexibleBox或flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

css3引入的flex布局优缺点：优点在于其容易上手，根据flex规则很容易达到某个布局效果。

缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。

css使用position还是flex

1：CSS使用position还是flex？1.对于布局来说，建议使用Flexbox（即flex）。Flexbox是一种现代的CSS布局模型，它可以方便地实现灵活的网页布局，特别适用于响应式设计和复杂的布局需求。2.使用Flexbox可以轻松地实现元素的自适应和对齐，并且具有灵活性和可扩展性。通过在容器上设置display：flex和一些相应的属性，可以实现水平和垂直的布局、空间平均分配、对齐方式的调整等。3.而对于position，它是CSS中用来控制元素定位的属性。Position属性可以让元素脱离文档流，并可以通过top、bottom、left、right等属性来控制元素的准确位置。4.但是，相比于Flexbox，position更适合用于特定的定位需求，如绝对定位或固定定位。对于一般的网页布局，使用Flexbox更加方便和灵活，而且不容易出现定位错误和布局混乱的情况。5.总结来说，如果是普通的页面布局需求，使用Flexbox会更加简单和方便。而position适用于特殊的布局场景或特定的元素定位需求。

css flex1和flex2什么区别

CSSFlex1和Flex2之间的区别如下：1.CSSFlex1和Flex2在一些方面有差异。2.Flex1是Flexbox布局的第一个版本，而Flex2是Flexbox布局的第二个版本。随着版本的升级，Flex2引入了一些新的功能和改进。3.Flex1是基本的弹性盒子布局模型，它提供了一些基础的布局功能，如定位、对齐和排列元素。而Flex2在Flex1的基础上进行了一些扩展和改进，引入了更多的属性和特性，例如新的对齐方式、更精细的布局控制以及更好的浏览器兼容性等。此外，Flex2也修复了一些Flex1存在的问题和bug，提供了更好的布局体验。综上所述，CSSFlex1和Flex2在功能和特性上存在一些区别，Flex2相对于Flex1具有更多的功能和改进。

如果你还想了解更多这方面的信息，记得收藏关注本站。