弹性布局的学习

CSS3的出现,让很多以前需要js或者复杂的css代码才能解决的问题变得简单起来。随着现在移动智能设备的越发普及,响应式的页面逐渐变得流行,这类界面会根据浏览器的宽度来做出调整,让自身在当前浏览器上显示良好。从前,若要实现这样的页面,是需要将元素的宽度,长度,外边距等设置为百分数。而现在,CSS3提出了一种更为简便的方法,让我们来完成响应式布局。这种方法就是弹性布局方式,该方法让我们不需要对网页的元素进行具体的布局实现,而只需要说明这些元素应该怎么样摆放。打个比方来说,若要让我们实现一个响应式布局,我们不采用CSS3的一些属性的时候,就需要计算每个元素的应占据多大的空间,该空间所占的百分比是多少,每个元素与其他元素的间隔是多少,而间隔所占的百分比又是多少,计算得头都大了还容易出问题。但若我们使用CSS3的弹性布局,那么这个问题就会迎刃而解啦,我们只需要设置这些元素的对齐方式(向左向右分散等),而不需要具体设置它们之间的间隔等,浏览器会根据我们的要求自动实现这些元素所占空间的分配,是不是很简单呀!

要想深入了解弹性布局,首先需要明确几个概念,接下来上图来帮助我们理解:

1 弹性容器和条目:

在构建弹性布局时,我们首先得设置一个弹性容器,它是一个display值为flex或者line-flex的DOM元素。在这个弹性容器中,1,2就是我们需要摆放的元素,它们被叫做条目。

2 主轴和交叉轴:

现在我们来仔细观察这个弹性容器,可以看见它有两个相互垂直的轴,分别叫做主轴和交叉轴。那么这两个轴的位置是否是固定的呢?其实不然,这个我们可以通过CSS3的属性来进行设置,只要我们愿意,可以随意设置垂直的那条为主轴,那么这时水平的就是交叉轴了。也就说,这两条轴并不是一定的,它们到底是主轴还是交叉轴,是通过我们来设置的。这两个轴有什么作用呢?其实它们和弹性容器里的条目布局有关啦!主轴与弹性容器中每一行条目的排列方向有关,交叉轴则与弹性容器中行的排列有关。举个例子,当我们设置主轴为垂直时,弹性容器中的条目就会竖直排列,而当主轴为水平时,条目则会水平排列。

3 具体代码:

说了这么些,弹性布局到底该怎么实现呢?那就写个代码试试吧。

这是我们页面的基本布局

<div class="box">
     <div></div>
     <div></div>
     <div></div>
</div>

很简单的布局,就是一个类名为box的div有三个子元素。下面我们就开始对他们应用CSS3的弹性布局方式,首先,需要我们来创建一个弹性容器,在这里我们就让类名为box的父元素来充当那个弹性容器吧

.box{
       display: flex;     display:-webkit-flex;
}

在这里需要注意两点:因为现在的浏览器对CSS3的支持不一致,所以为了能让代码在各个主流浏览器中有效,就需要加上前缀。在这里为简便起见,我只对内核为webkit的浏览器进行了兼容。然后还有一点,那就是不知是属性值flex可以让元素变为弹性容器,还有inline-flex也可以。但是flex和inline-flex又是有差别的,它们的关系同block和inline-block很相似。

现在弹性容器有了,我们就来决定主轴和交叉轴,这决定了我们的条目到底是垂直显示还是水平显示。在这个例子中,我们就让条目们水平显示,所以就有了下面的代码:

.box{
                display: flex;
                display: -webkit-flex;
                flex-direction:row;
}

上面这一小段代码的flex-direction的值就决定了主轴为水平方向的那条轴,所有条目也会按照顺序从左到右的显示。就像下面这样:

若是我们将flex-direction的值设置为column,那么这三个div就会从上到下排列,如下图所示:

另外,不知row和column这两个值,flex-direction还可以设置为row-reverse,column-reverse ,这两个值分别为从右到左和从下到上,就不详述了。

接下来,我们来设置弹性容器内的条目到底是单行显示还是多行显示,这就需要用到flex-wrap了。首先思考一个问题,若我们所有的条目都在一行中显示,但是一行装不下所有的条目,我们需要换行,那该怎么换行呢?

只需要一行代码,flex-wrap:wrap

 .box{
                display: flex;
                display: -webkit-flex;
                flex-direction:row;
                flex-wrap:wrap;
         }

这个值可以让一行中放不下的元素自动到下一行。属性flex-wrap还可以取其他另外两个值,分别是nowrap和wrap-reverse,前一个是不换行,后一个第一行在下方,而第一行放不下的元素跑到上面一行去。

在我们的例子中,将flex-wrap设置为wrap,可以看到下图所示的情况:

第一行放不下的div3跑到下一行去了。

明白了换行,我们接下来看看对齐,即弹性容器中条目的对齐方式,CSS3给了我们两个属性来设置对齐方式,一个是justify-content,设置沿着主轴的对齐方式,一个是align-items,设置沿着交叉轴的对齐方式。

justify-content的取值为:flex-start,flex-end,center,space-between,space-around

align-items的取值为:flex-start,flex-end,center,base-line,stretch

先说设置条目沿主轴对齐的justify-content,当主轴为垂直方向时,justify-content就作用在垂直方向上。当主轴为水平方向时,justify-content就作用在水平方向上。所以说,justify-content与flex-directio的值是有关系的。

justify-content可以设置为flex-start,即向主轴的起始位置对齐,flex-end为向主轴的尾巴位置对齐,center为向主轴的中间对齐,space-between为两端对齐,条目之间的间隔相等,space-around为条目两侧的间隔相等。

再说align-items,这个属性可以用于设置条目沿交叉轴的对齐方式,其中flex-start为向交叉轴的起始位置对齐,flex-end为向交叉轴的尾巴位置对齐,center为向交叉轴的中间对齐,base-line为向条目的第一行文字的基线对齐,stretch则是当项目未设置高度或者设置未自动,就会沾满整个容器。

除了这两个属性可以设置对齐方式,还可以使用align-content,与上述两个属性不同的是,它定义了多根轴线的对齐方式,当只有一根轴线时,该属性不起作用。

它的取值可以为flex-start,flex-end,center,space-between,space-around,stretch。含义同上面的两个差不多。

时间: 2024-10-20 13:59:13

弹性布局的学习的相关文章

Flex布局【弹性布局】学习

先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以遇到了很多问题,自己花费了太多时间去解决问题,今天就拿其中一个比较让我头疼的问题来引出今天的话题 当时在初识html.css的时候,遇到了水平排放的问题,当然这个一下子就查出来了,使用 float ,但是使用了 float 会使子元素脱离父元素的布局,父元素的高度会变成 0 ,从而根本展示不出来 这

flex弹性布局学习总结

一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀,以下不再重复说明. 下图为flex的相关概念的示意图 使用flex布局的容器(flex container),它内部的元素自动成为flex项目(flex item).容器拥有两根隐形的轴,水平的主轴(main axis),和竖

[学习笔记]viewport定义,弹性布局,响应式布局

一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">,视窗宽度=设备宽度,默认缩放=1,不允许用户缩放. 二,flexbox,弹性盒子模型:1,在元素的css中添加display:-webkit-flex就可以转换成弹性盒模型了,然后在多个子元素的CSS中添加flex:1/2/3,就可以让子元素按

flex弹性布局学习

一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 二.了解两个基本概念: 容器:需要添加弹性布局的父元素: 项目:弹性布局容器中的每一个子元素,称为项目: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end:交叉轴的开始位

从零开始学习前端开发 — 12、CSS3弹性布局

一.分栏布局 1.设置栏数 column-count:数值; 2.设置每栏的宽度 column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一即可 3.设置栏间距 column-gap:数值+单位; 4.设置栏间隔线 column-rule:5px solid|dashed|dotted black; 5.设置是否跨栏显示 column-span:all(跨栏)|none(不跨栏); 注:a)给需要跨栏显示的元素设置该属性 b) 该属

css flex弹性布局学习总结

一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”. 它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”. 下图为flex的相关概念的示意图       

静态布局、自适应布局、流式布局、响应式布局、弹性布局简析

近期学习,有很多感想,有时候看似相近的概念,其实意义却不相同.所以学习要针对不同的名词有明确的区分意识. 抽空时间,打算学习下display:flex;本以为就是一个小小的知识点,正式去研究的时候,才发现display:flex;有很多内容,能实现很多效果.比如三栏布局(左右两栏固定,中间栏自适应),圣杯布局. 后来想着经常听到流式布局,自适应布局,响应式布局,他们有什么区别呢,就去搜了许多内容查看,才发现每种布局都有优缺点和不同使用场景. 静态布局:给页面元素设置固定的宽度和高度,单位用px,

使用em为单位制作两列弹性布局

一.DIV布局按照定位的方法分为:浮动方法(float),坐标定位方法(position),还有就是两者相结合的方法. 二.DIV布局按照定义单位的不同可分为:固定宽度布局.流体布局.弹性布局和混合布局. 固定宽度布局是将宽度用像素单位定义,它的宽度总保持不变,也被成为“冰布局”. 它的缺点是由于宽度固定,无论浏览器窗口尺寸有多大,它的尺寸也不变,无法充分利用空间. 当浏览器窗口变小时,会出现水平滚动条.这些缺点可以用其他两种布局方法解决. 流体布局的单位是用百分比控制的,不是像素.这使流体布局

第29章 CSS伸缩弹性布局(上)

第 29章 CSS3弹性伸缩布局[上]学习要点:1.布局简介2.旧版本 本章主要探讨 HTML5中 CSS3提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解.一.布局简介CSS3提供一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box).用来提供一个更加有效的方式实现响应式布局.但是用于这个布局方式还处于 W3C的草案阶段,并且它还分为旧版本.新版本以及混合过渡版本三种不同的编码方式.在发展中,可能还有各种改动,浏览器的兼容性还存在问题.所以,本节课