CSS Flex 布局全攻略:从小白到精通

一、Flex 布局简介

咱来说说 Flex 布局哈,这就是弹性盒子布局,是 CSS3 里一种特厉害的布局办法。它能轻轻松松弄出各种复杂的布局效果,让元素变得有弹性,能适应不同的页面大小还有设备。IE10 以及更高的版本支持它,在移动端和那些现代浏览器里可流行啦。

Flex 布局意思就是 “弹性布局”,能给盒状模型提供最大的灵活性。随便哪个容器都能指定成 Flex 布局,行内元素也行。得注意哈,设成 Flex 布局以后,子元素的 float、clear 还有 vertical-align 属性就没用啦。

弹性容器就是包含着弹性项目的父元素,把 display 属性的值设成 flex 就能定义成弹性容器;弹性项目就是子容器。容器默认有两根轴:水平的主轴和垂直的侧轴。主轴开始的地方(跟边框的交叉点)叫 main start,结束的地方叫 main end;侧轴开始的地方叫 cross start,结束的地方叫 cross end。项目默认是沿着主轴排列的。单个项目占的主轴空间叫 main size,占的侧轴空间叫 cross size。

Flex 布局的基本属性分成容器上的和项目上的。容器上的属性主要有这些:

flex-flow 属性:.container {flex-flow: || ; 它默认的取值是 row nowrap}。flex-flow 就是 flex-direction 和 flex-wrap 的组合简写,用来定义弹性容器的主轴方向还有换行方式。

flex-direction 属性:.container {flex-direction: row | row-reverse | column | column-reverse;}。它能取的值有 row(这是默认值):主轴是水平方向,起点在左边;row-reverse:主轴是水平方向,起点在右边;column:主轴是垂直方向,起点在上边;column-reverse:主轴是垂直方向,起点在下边。

flex-warp 属性:.container {flex-wrap: nowrap | wrap | wrap-reverse;}。nowrap(默认的):不换行;wrap:换行,第一行在上面;wrap-reverse:换行,第一行在下面。

justify-content 属性:.container {justify-content: flex-start | flex-end | center | space-between | space-around;}。可能的取值有 flex-start(默认值):左边对齐;flex-end:右边对齐;center:中间对齐;space-between:两边对齐,项目之间的间隔都一样;space-around:每个项目两边的间隔一样,项目之间的间隔比项目跟边框的间隔大一倍。

align-items 属性:.container {align-items: flex-start | flex-end | center | baseline | stretch;}。flex-start:交叉轴起点对齐;flex-end:交叉轴终点对齐;center:交叉轴中点对齐;baseline: 项目第一行文字的基线对齐;stretch(默认值):要是项目没设高度或者设成 auto,就会占满整个容器的高度。

align-content 属性:.container {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}。这个属性可能的取值有:flex-start:跟交叉轴起点对齐;flex-end:跟交叉轴终点对齐;center:跟交叉轴中点对齐;space-between:跟交叉轴两边对齐,轴线之间的间隔平均分布;space-around:每根轴线两边的间隔都一样,轴线之间的间隔比轴线跟边框的间隔大一倍;stretch(默认值):轴线占满整个交叉轴。

项目上的属性主要有:

flex 属性:flex 属性是 flex-grow,flex-shrink,felx-basis 三个属性的简写。要是属性值是 none 那就表示 0 0 auto,要是属性值是 1 或者 auto 那就表示 1 1 auto。

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 属性一样的值,那项目就占固定空间。

align-self 属性:能让单个项目有跟其他项目不一样的对齐方式,可以盖住 align-items 属性。默认值是 auto,表示继承父元素的 align-items 属性,要是没有父元素,那就跟 stretch 一样。这个属性可能取 6 个值,除了 auto,其他都跟 align-items 属性完全一样。

二、Flex 的基本概念

容器和项目

用 Flex 布局的那个元素就叫 Flex 容器,它的子元素自己就变成了 Flex 项目。

容器默认有主轴和交叉轴,项目是沿着主轴排的。

主轴和交叉轴

主轴的方向是由 flex-direction 这个属性决定的,能是水平的或者垂直的方向,有四个能选的值。交叉轴是跟主轴垂直的,是用来让项目在垂直方向对齐的。

用 Flex 布局的那个元素就叫 Flex 容器,它的子元素自己就变成了 Flex 项目。

容器默认有主轴和交叉轴,项目是沿着主轴排的。

主轴的方向能是水平方向(从左到右是默认值 row,从右到左是 row-reverse),也能是垂直方向(从上到下是 column,从下到上是 column-reverse)。

交叉轴跟主轴是垂直的,要是主轴是水平方向,那交叉轴就是垂直方向,用来让项目在垂直方向对齐;要是主轴是垂直方向,那交叉轴就是水平方向。

三、容器的属性

flex-direction 决定主轴方向:flex-direction 有四个值,分别是 row(这是默认的,从左到右)、row-reverse、column(从上到下)、column-reverse。这里头,row 意思是主轴是水平方向,起点在左边;row-reverse 意思是主轴是水平方向,起点在右边;column 意思是主轴是垂直方向,起点在上边;column-reverse 意思是主轴是垂直方向,起点在下边。

flex-wrap 规定容器里的元素能不能换行:flex-wrap 有三个值,分别是 nowrap(默认的,不换行)、wrap(换行)、wrap-reverse(反向换行)。nowrap 就是说弹性容器是单行的,项目不会换行;wrap 就是说弹性容器是多行的,第一行在上面,项目要是溢出来了就换行;wrap-reverse 就是说弹性容器是多行的,第一行在下面,项目要是溢出来了就反向换行。

flex-flow 是 flex-direction 和 flex-wrap 的简写形式:flex-flow 其实用处不太大,建议把 flex-direction 和 flex-wrap 分开设置。它就是这俩属性的组合简写,默认值是 row nowrap。比如说,flex-flow: column wrap; 这就表示主轴是垂直方向,项目要是溢出来了就换行。

justify-content 是元素在主轴上的对齐方式:justify-content 有五个值,分别是 flex-start(左对齐或者上对齐)、flex-end(右对齐或者下对齐)、center(居中对齐)、space-between(两端对齐,项目之间的距离一样)、space-around(项目两边的距离一样,是两端距离的两倍)。flex-start 就是朝着行头紧紧挨着填满(左对齐);flex-end 就是朝着行尾紧紧挨着填满(右对齐);center 就是在中间紧紧挨着填满;space-between 就是两端对齐,在这一行上平均分布,项目之间的距离跟 main start、main end 两端对齐的时候一样;space-around 就是每个弹性盒子两边的间隔一样,项目之间的距离一样,项目跟 main start、main end 之间的距离是项目之间距离的一半。

align-items 是元素在交叉轴上的对齐方式:align-items 有五个值,分别是 flex-start(上面或者左边对齐)、flex-end(下面或者右边对齐)、center(中点对齐)、stretch(这是默认值,没设置高度或者设成 auto 的时候占满整个容器的高度)、baseline(按照元素的第一行文字的基线对齐)。flex-start 就是弹性盒子元素的纵轴起始位置紧紧靠着这一行的纵轴起始位置(起点对齐);flex-end 就是弹性盒子元素的纵轴起始位置紧紧靠着这一行的纵轴结束位置(终点对齐);center 就是弹性盒子元素在这一行的纵轴上居中对齐;baseline 就是弹性盒子元素的第一行文字的基线对齐;stretch 就是要是项目没设置高度或者设成 auto,就会占满整个容器的高度。

align-content 是多根轴线的对齐方式:要是只有一根轴线,这个属性就没用,有六个值跟 align-items 差不多。分别是 flex-start(跟交叉轴的起点对齐)、flex-end(跟交叉轴的终点对齐)、center(跟交叉轴的中点对齐)、space-between(跟交叉轴两端对齐,轴线之间的间隔平均分布)、space-around(每根轴线两边的间隔都一样,轴线之间的间隔比轴线跟边框的间隔大一倍)、stretch(轴线占满整个交叉轴)。

四、项目的属性

order 能设置项目在容器里的排列顺序,值越小就越靠前,默认值是 0 。通过设置 order 属性,能很容易地改变项目在弹性容器里的排列顺序。比如说,给一个项目设置的 order 值比较小,那它在容器里就会排在更靠前的位置;设置的值比较大,那就会排在更靠后的位置。要是想让某个 flex 子项在最前面显示,可以设置比 0 还小的整数,像 -1 就行。

flex-grow 是项目在主轴方向有剩余空间的时候的放大比例,默认是 0 ,就是不放大。flex-grow 属性规定了项目在主轴方向有剩余空间时的放大比例。要是是 0 ,就算有剩余空间也不会放大。当多个项目的 flex-grow 值不一样的时候,它们会按照比例来瓜分剩余空间。比如说,要是三个项目分别设置 flex-grow:1 、flex-grow:2 、flex-grow:3 ,剩余宽度的分母是 sum=1+2+3=6 ,那第一个项目分到的宽度就是 1/6600px=100px ,第二个项目分到的宽度就是 1/3600px=200px ,第三个项目分到的宽度就是 1/2*600px=300px 。

flex-shrink 是项目在主轴方向没有剩余空间时的缩小比例,默认值是 1 ,就是空间不够的时候会缩小,设置成 0 就不缩小。flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素只有在默认宽度加起来比容器大的时候才会收缩,收缩的大小得看 flex-shrink 的值。比如说,要是 A、B、C 设置 flex-shrink:1 ,D、E 设置为 flex-shrink:2 ,父容器定义成 500px ,子项被定义成 120px ,子项加起来就是 600px ,超过父容器 100px 。那超过的这 100px 就得让 A、B、C、D、E 来消化,通过收缩因子算一下,A、B、C 被去掉的溢出量大概是 14px ,D、E 被去掉的溢出量大概是 28px ,最后 A、B、C、D、E 的实际宽度分别是:120 - 14 = 106px 、120 - 14 = 106px 、120 - 14 = 106px 、120 - 28 = 92px 、120 - 28 = 92px 。

flex-basis 指示在分配多余空间之前项目占的长度,默认情况下是 auto ,也就是设置的 width 。flex-basis 属性指示在分配多余空间之前项目占的长度。它一开始的值是 auto ,这时候浏览器会检查元素有没有设置 width 属性值。要是有,那就用 width 的值当作 flex-basis 的值;要是没有,那就用元素内容本身的大小。要是 flex-basis 的值不是 auto ,width 属性就会被忽略。

flex 是 flex-grow 、flex-shrink 、flex-basis 这三个属性的简写,有两个快捷值:auto 和 none 。flex 属性是 flex-grow 、flex-shrink 、flex-basis 这三个属性的简写。当 flex 取值是 none ,那计算值就是 0 0 auto ;当 flex 取值是 auto ,那计算值就是 1 1 auto ;当 flex 取值是一个不是负数的数字,那这个数字就是 flex-grow 的值,flex-shrink 取 1 ,flex-basis 取 0% ;当 flex 取值是一个长度或者百分比,那就看成是 flex-basis 的值,flex-grow 取 1 ,flex-shrink 取 1 。

align-self 允许单个项目有跟其他项目不一样的对齐方式,可以盖住 align-items 属性。align-self 属性允许单个项目有跟其他项目不一样的对齐方式,可以盖住 align-items 属性。它能取六个值:flex-start 、flex-end 、center 、baseline 、stretch 、auto 。这个属性设置单独的排列行为,它的值的意思跟容器属性那部分差不多。

五、Flex 的实际应用

开启 flex 就能实现项目水平排列的水平布局。

在 CSS 里,用 display: flex 就能把一个容器设成 Flex 布局,容器里边的子元素会自己变成 Flex 项目,然后沿着主轴水平排列。比如说:

.container {
  display: flex;
}

右对齐和居中可以这么弄,把 justify-content 设置成 flex-end 就能实现右对齐,设置成 center 就能实现居中。

要是想把 Flex 布局里的子元素弄成右对齐,可以用属性 justify-content 来管主轴上的对齐方式。把 justify-content 设成 flex-end 就能实现右对齐,就像下面这样:

.container {
  display: flex;
 justify-content: flex-end;
}

要是想实现居中对齐,那就把 justify-content 设置为 center :

.container {
  display: flex;
 justify-content: center;
}

用 flex-wrap 能实现换行,用 align-content 能实现多行在交叉轴上的对齐。

要是想让 Flex 项目在容器里边换行显示,那就可以用 flex-wrap 属性。flex-wrap 有三个值,分别是 nowrap(这是默认的,不换行)、wrap(换行,第一行在上面)、wrap-reverse(反向换行)。比如说:

.container {
  display: flex;
 flex-wrap: wrap;
}

当项目换行之后,可以用 align-content 属性来设定多行在交叉轴上的对齐方式。要是项目只有一根轴线,这个属性就不管用啦。它有六个值跟 align-items 挺像的,像 flex-start(跟交叉轴的起点对齐)、flex-end(跟交叉轴的终点对齐)、center(跟交叉轴的中点对齐)、space-between(跟交叉轴两端对齐,轴线之间的间隔平均分布)、space-around(每根轴线两边的间隔都一样,轴线之间的间隔比轴线跟边框的间隔大一倍)、stretch(轴线占满整个交叉轴)。比如说:

.container {
  display: flex;
 flex-wrap: wrap;
 align-content: center;
}

主轴和交叉轴的对齐方式能通过不同的属性设置,来达成项目在主轴和交叉轴上的各种对齐效果。

对于主轴的对齐,可以用 justify-content 属性,它有五个值,分别是 flex-start(左对齐或者上对齐)、flex-end(右对齐或者下对齐)、center(居中对齐)、space-between(两端对齐,项目之间的距离相等)、space-around(项目两边的距离相等,是两端距离的两倍)。比如说:

.container {
  display: flex;
 justify-content: space-between;
}

对于交叉轴的对齐,可以用 align-items 属性,它有五个值,分别是 flex-start(上面或者左边对齐)、flex-end(下面或者右边对齐)、center(中点对齐)、stretch(这是默认值,没设置高度或者设成 auto 时占满整个容器高度)、baseline(按照元素的第一行文字的基线对齐)。比如说:

.container {
  display: flex;
 align-items: center;
}

子元素能进行设置,能达成像子元素平分空间、特定子元素不占多余空间这类效果。

能够用 flex 属性来设置子元素在 Flex 布局里的表现。要是给子元素设置 flex: 1; ,那子元素就会平分剩余空间。比如说:

.container {
  display: flex;
}
.item {
  flex: 1;
}

要是想让特定子元素不占多余空间,可以把这个子元素的 flex-shrink 设置为 0 。比如说:

.container {
  display: flex;
}
.specific-item {
 flex-shrink: 0;
}

六、总结

Flex 布局在 CSS 里是特别厉害的一种布局方式,把它的基本概念和属性掌握住,就能轻轻松松达成各种复杂的布局要求,让页面布局变得更灵活、更高效。

通过这篇文章对 Flex 布局的介绍,咱们能瞧出来 Flex 布局在页面布局里有很大的优势。不管是简单的水平布局、右对齐和居中,还是复杂点的换行跟多行对齐、主轴跟交叉轴的对齐方式,还有子元素的各种设置,Flex 布局都能给出简单又有效的解决办法。

在实际用的时候,咱们能按照不一样的需求灵活地用 Flex 布局的各个属性。比如说,通过设置 display: flex 来开启 Flex 布局,达成项目的水平排列;用 justify-content 属性来实现右对齐和居中;靠 flex-wrap 和 align-content 来实现换行跟多行对齐;通过不同的属性设置来达成主轴跟交叉轴的对齐方式;还能对子元素进行特定的设置,像平分空间、特定子元素不占多余空间啥的。

反正,把 Flex 布局掌握好对前端开发者特别重要。它不光能提高开发的效率,还能让页面布局更好看、更灵活、更能自适应。希望

CSS 布局说:这可能是最全的

前言

现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html。

其实,我们可能经常在聊组件化,咋地咋地。但是,回过头来思考一下,如果你看到一张设计稿的时候,连布局都不清不楚,谈何组件化呢。所以,我们需要在分清楚组件之前,先来分清楚布局。废话说了这么多,只是想告诉你,布局这个东西真的很重要。本篇内容概括了布局的基础+基本的PC端布局+移动端适配等内容。如果你喜欢我的文章,欢迎评论,欢迎Star~。欢迎关注我的github博客()

正文

或许对于你来说,喜欢js的背后,是看不懂css的深层。入门级的css非常简单,但是,精通它却没有想象的容易。我们本篇聊的是布局。前端开发,从拿到设计稿的那一刻,布局的思考就已经开始了。

举个例子,建筑师在设计房屋的时候,需要丈量开发地块的长度,以及每幢房屋相对于其他房屋的位置。

在css布局中,似乎也是这样开始的。我们也会去区分每个元素的尺寸和定位,力争完美的实现整个设计稿。所以,我们的布局应该从定位和尺寸开始聊起

定位

定位的概念就是它允许你定义一个元素相对于其他正常元素的位置,它应该出现在哪里,这里的其他元素可以是父元素,另一个元素甚至是浏览器窗口本身。还有就是浮动了,其实浮动并不完全算是定位,它的特性非常的神奇,以至于它在布局中被人广泛的应用。我们会在后文中专门提及它的。

谈及定位,我们就得从position属性说起。你能准确的说出position的属性值吗?相信你可以完美地说出这么六个属性值:static、relative、absolute、fixed、sticky和inherit。

简单地,介绍一下position的属性值的含义后,在来看一下偏移量top、right、bottom、left四个属性。

不清楚,当初在初学css的时候,会不会与margin这个属性混淆?其实,它们之间是很容易去辨识地。因为这四个属性值,其实是,定位时的偏移量。偏移量不会对static的元素起到作用。而margin,相对应的是盒子模型的外边距,它会对每个元素框起到作用,使得元素框与其他元素之间产生空白。

下面:我们来看一下一些常用定位的偏移

relative

它的偏移是相对于原先在文档流中的位置,如图:

这里设置了top:100px,left:100px。

absolute

它的偏移量是相对于最近一级position不是static的祖先元素的

fixed

它的偏移量是相对于视口的。

其实,这里说描述的内容,应该都是需要理解的。这些相对于布局来说是基础的,同时也是非常重要的。需要注意的是,这里的偏移量其实已经涉及到了接下来要说的尺寸。在做自适应布局设计时,往往希望这些偏移量的单位能够使用百分比,或者相对的单位例如rem等。

尺寸

那之前上面谈到过尺寸的单位——百分比。那么,下面部分我们就围绕着尺寸单位展开。

尺寸,我们就应该从单位聊起,对于px这个单位,做网页的应该在熟悉不过了,因此不多做介绍。

那么,我们可以来介绍一下下面几个单位:

单位只是一个来定义元素大小的相应参考。另一个概念,或许可以用房子来打一个比方,在早年每幢房子都会在房子的外围建一层栅栏,使得整一块地区可以看成房子+内部地块+栅栏+外围地块的模型。而在css中,每个元素也会有盒子模型的概念。

盒子模型:每个元素,都会形成一个矩形块,主要包括四部分:margin(外边距)+border(边框)+padding(内边距)+content(内容)

css中存在两种不同的盒子模型,可以通过box-sizing设置不同的模型。两种盒子模型,主要是width的宽度不同。如图:

这是标准盒子模型,可以看到width的长度等于content的宽度;而当将box-sizing的属性值设置成border-box时,盒子模型的width=border+padding+content的总和。

可以看出,对于不同的模型的宽度是不同的。宽度默认的属性值是auto,这个属性值会使得内部元素的长度自动填充满父元素的width。如图:

但是,height的属性值也是默认的auto,为什么没有像width一样呢?

其实,auto这个属性值表示的是浏览器自动计算。这种自动计算,需要一个基准,一般浏览器都是允许高度滚动的,所以,会导致一个问题——浏览器找不到垂直方向上的基准。

同样地道理也会被应用在margin属性上。相信如果考察居中时,水平居中你可能闭着眼睛都能写出来,但是垂直居中却绕着脑袋想。这是因为如果是块级元素水平居中只要将水平方向上的margin设置成auto就可以了。但是,垂直方向上却没有这么简单,因为你设置成auto时,margin为0。这个问题,还是需要仔细思考一下的。

到此为止,布局最基本的部分我们已经将去大半,还有就是一块浮动。

浮动

浮动,这是一个非常有意思的东西,在布局中被广泛的应用。最初,设计浮动时,其实并不是为了布局的,而是为了实现文字环绕的特效,如图:

但是,浮动并不是仅仅这样而已。何为浮动?浮动应该说是‘自成一派’,类似于ps中的图层一样,浮动的元素会在浮动层上面进行排布,而在原先文档流中的元素位置,会被以某种方式进行删除,但是还是会影响布局。你可能会觉得有疑问,什么叫影响布局?我们可以来举个例子:

首先,我们准备两个颜色块,如图:

之后我们将left的块设置成左浮动,如图:

可以,发现虽然left块因为左浮动,而使得原先元素在文档流中占有的位置被删除,但是,当right块补上原先的位置时,right块中的字体却被挤出来了。这就是所谓的影响布局。

浮动为什么会被使用在布局中呢?因为设置浮动后的元素会形成BFC(使得内部的元素不会被外部所干扰),并且元素的宽度也不再自适应父元素宽度,而是适应自身内容。这样就可以,轻松地实现多栏布局的效果。

浮动的内容还需要介绍一块——清除浮动。可以看到,浮动元素,其实对于布局来说,是特别危险的。因为你可能这一块做过浮动,但未做清除,那么造成高度塌陷的问题。就是上面图示的那种情况。

清除浮动,最常用的方法有两种:

这里只是稍微的提上一嘴。下面我们正式来介绍一下网页的布局,本篇最核心的东西。

最初的布局——table

最初的时候,网页简单到可能只有文字和链接。这时候,大家最常用的就是table。因为table可以展示出多个块的排布。

这种布局现在应该不常用了,因为在形色单一时,使用起来方便。但是,现在的网页变得越来越复杂,适配的问题也是越来越多,这种布局已经不再时候了。

主要是div块的出现,可以使得网页进行灵活的排布,使得网页变得繁荣。这时,开发者也开始思索如何去更加清晰地分辨网页的层次。接下来,我们可以看看有哪些比较出名的布局方式。

两栏布局

是否记得,那些一边主体内容,一边目录的网页,如图:

类似于上图的布局,可以定义为两栏布局。

两栏布局:一栏定宽,一栏自适应。这样子做的好处是定宽的那一栏可以做广告,自适应的可以作为内容主体。

实现的方式:float + margin

  1.   class="left">定宽

  •   class="right">自适应

    1. .left{

    2.  width: 200px;

    3.  height: 600px;

    4.  background: red;

    5.  float: left;

    6.  display: table;

    7.  text-align: center;

    8.  line-height: 600px;

    9.  color: #fff;

    10. }

    11. .right{

    12.  margin-left: 210px;

    13.  height: 600px;

    14.  background: yellow;

    15.  text-align: center;

    16.  line-height: 600px;

    17. }

    如图所示:

    其他的方法:还可以使用position的absolute,可以使用同样的效果

    三栏布局

    三栏布局,也是经常会被使用到的一种布局。

    它的特点:两边定宽,然后中间的width是auto的,可以自适应内容,再加上margin边距,来进行设定。

    三栏布局可以有4种实现方式,每种实现方式都有各自的优缺点。

    1.使用左右两栏使用float属性,中间栏使用margin属性进行撑开,注意的是html的结果

    1. class="left">左栏

  • class="right">右栏

  • class="middle">中间栏

    1. .left{

    2.  width: 200px;height: 300px; background: yellow; float: left;    

    3. }

    4. .right{

    5.  width: 150px; height: 300px; background: green; float: right;

    6. }

    7. .middle{

    8.  height: 300px; background: red; margin-left: 220px; margin-right: 160px;

    9. }

    缺点是:1. 当宽度小于左右两边宽度之和时,右侧栏会被挤下去;2. html的结构不正确

    2. 使用position定位实现,即左右两栏使用position进行定位,中间栏使用margin进行定位

    1. class="left">左栏

  • class="middle">中间栏

  • class="right">右栏

    1. .left{

    2.    background: yellow;

    3.    width: 200px;

    4.    height: 300px;

    5.    position: absolute;

    6.    top: 0;

    7.    left: 0;

    8. }

    9. .middle{

    10.    height: 300px;

    11.    margin: 0 220px;

    12.    background: red;

    13. }

    14. .right{

    15.    height: 300px;

    16.    width: 200px;

    17.    position: absolute;

    18.    top: 0;

    19.    right: 0;

    20.    background: green;

    21. }

    好处是:html结构正常。

    缺点时:当父元素有内外边距时,会导致中间栏的位置出现偏差

    3. 使用float和BFC配合圣杯布局

    将middle的宽度设置为100%,然后将其float设置为left,其中的main块设置margin属性,然后左边栏设置float为left,之后设置margin为-100%,右栏也设置为float:left,之后margin-left为自身大小。

    1. class="wrapper">

    2.     class="middle">

    3.         class="main">中间

    4.    

    5.     class="left">

    6.        左栏

    7.    

    8.     class="right">

    9.        右栏

    10.    

    1. .wrapper{

    2.    overflow: hidden;  //清除浮动

    3. }

    4. .middle{

    5.    width: 100%;

    6.    float: left;

    7. }

    8. .middle .main{

    9.    margin: 0 220px;

    10.    background: red;

    11. }

    12. .left{

    13.    width: 200px;

    14.    height: 300px;

    15.    float: left;

    16.    background: green;

    17.    margin-left: -100%;

    18. }

    19. .right{

    20.    width: 200px;

    21.    height: 300px;

    22.    float: left;

    23.    background: yellow;

    24.    margin-left: -200px;

    25. }

    缺点是:1. 结构不正确 2. 多了一层标签

    4. flex布局

    1. class="wrapper">

    2.     class="left">左栏

    3.     class="middle">中间

    4.     class="right">右栏

    1. .wrapper{

    2.    display: flex;

    3. }

    4. .left{

    5.    width: 200px;

    6.    height: 300px;

    7.    background: green;

    8. }

    9. .middle{

    10.    width: 100%;

    11.    background: red;

    12.    marign: 0 20px;

    13. }

    14. .right{

    15.    width: 200px;

    16.    height: 3000px;

    17.    background: yellow;

    18. }

    除了兼容性,一般没有太大的缺陷

    三栏布局使用较为广泛,不过也是比较基础的布局方式。对于PC端的网页来说,使用较多,但是移动端,本身宽度的限制,很难做到三栏的方式。因此,移动端盛行的现在,我们应该掌握一些自适应布局技巧和flex等方式。

    移动端的时代

    或许,手机占用了人们大部分的时间,对于前端工程师来说,不仅需要会h5和大前端的技术,还需要去适配不同的手机屏幕。PC端称王的时代已经过去,现在要求的网页都是需要能够去适配PC和移动端的。

    之前,所聊的两栏和三栏布局,一般只能在PC中去使用,在移动端,由于屏幕尺寸有限,很难去做到类似的操作,所以,我们需要来了解新的东西。

    1. 媒体查询

    如果你需要一张网页能够在PC和移动端都能按照不同的设计稿显示出来,那么你需要做的就是去设置媒体查询。

    媒体查询的css标识符是@media,它的媒体类型可以分为:

    all, 所有媒体

    braille 盲文触觉设备

    embossed 盲文打印机

    print 手持设备

    projection 打印预览

    screen 彩屏设备

    speech ‘听觉’类似的媒体类型

    tty 不适用像素的设备

    tv 电视

    代码示例:

    1. @media screen {

    2.  p.test {font-family:verdana,sans-serif;font-size:14px;}

    3. }

    4. @media print {

    5.  p.test {font-family:times,serif;font-size:10px;}

    6. }

    7. @media screen,print {

    8.  p.test {font-weight:bold;}

    9. }

    10. /*移动端样式*/

    11. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    12.  /* Styles */

    13. }

    媒体查询的主要原理:它像是给整个css样式设置了断点,通过给定的条件去判断,在不同的条件下,显示不同的样式。例如:手机端的尺寸在750px,而PC端则是大于750px的,我们可以将样式写成:

    1. @media screen and (min-width: 750px){

    2.  .media{

    3.    height: 100px;

    4.    background: red;

    5.  }

    6. }

    7. @media (max-width: 750px){

    8.  .media{

    9.    height: 200px;

    10.    background: green;

    11.  }

    12. }

    demo地址

    效果图:

    flex弹性盒子

    其实移动端会经常使用到flex布局,因为在简单的页面适配方面,flex可以起到很好的拉伸的效果。我们先看几张图体会一下:

    可以从图中看出,这个网页不管屏幕分辨率怎么发生变化,它的高度和位置都不变,而且里面的元素排布也没有发生变化,总是图标信息在左边和薪资状况在右边。

    这就是很明显的,flex布局。flex可以在移动端适配比较简单的,元素比较单一的页面。

    具体的flex布局内容,在这里不详细说明。flex传送门:

    rem适配

    rem可以说是移动端适配的一个神器。类似于手淘等界面,都是使用的rem进行的适配。这种界面有个特点就是页面元素的复杂度比较高,而使用flex进行布局会导致页面被拉伸,但是上下的高度却没有变化等问题。示例图:

    具体的讲解可以看这篇比较好的文章。rem传送门

    总结

    分析到这里,布局的很多东西都已经非常的清晰了。相信这是一篇值得去收藏的一篇文章。内容可能有点多,所以这里做一个总结:

    相信你看完这些,在以后,一定可以拿到设计稿的时候,内心大致有个算盘,应该如何区分,如何布局。

    最后,如果你对我写的有疑问,可以与我讨论。如果我写的有错误,欢迎指正。你喜欢我的博客,请给我关注Star~呦。大家一起总结一起进步。欢迎关注我的github博客

    推荐资料:

    1.

    2.

    弹性容器 弹性项目 布局属性 主轴空间 交叉轴对齐
    本站内容来自用户投稿,如果侵犯了您的权利,请与我们联系删除。联系邮箱:835971066@qq.com

    本文链接:http://news.xiuzhanwang.com/post/2064.html

    上一篇 右江区企业网站制作全包

    下一篇 南开企业网站系统

    发表评论

    评论列表

    还没有评论,快来说点什么吧~

    友情链接: