针对 Flexbox 新手的简单教程。
(给前端大全加星标,提升前端技能)
来源:葡萄城官网
www.cnblogs.com/powertoolsteam/p/10000927.html
近几年,CSS领域出现了一些复杂的专用布局工具,用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox,或者说是弹性盒子布局模块(Flexible Box Layout Module)是这些新布局工具中的第一个,接着是CSS网格布局模块(CSS Grid Layout Module)。我们会在本文给出一个易于理解的flexbox入门介绍。
随着CSS网格布局的引入,你可能会问flexbox布局是否真的还有必要。虽然它们所能做的事情有一些重叠,但其各自在CSS布局中有着非常特别的目的。一般来说,flexbox在一维场景(比如,一串类似的元素)下有最佳应用,而网格是二维场景下理想的布局方案(例如整个页面的元素)。
即便如此,flexbox仍可以用于整个页面的布局,这样它能为那些还不支持网格布局的浏览器提供合适的兼容处理。(必须承认,网格布局正在大多数现代浏览器中快速得到支持,不过对flexbox的支持仍然更为广泛,所以如果你想让你的布局在稍微老旧的浏览器中也生效,使用flexbox作为网格布局的降级方案是很容易的)。
使用Flexbox的好处
flexbox的一些好处是:
页面元素能被任意方向地放置(靠左、靠右、从上往下甚至从下往上)
布局内容的可视顺序能够被反转或重排
元素大小能“弹性”适应可用空间,并根据容器或者兄弟元素进行相应地对齐
能轻松实现等列宽布局(与每一列里面的内容无关)
为了阐述其多样的属性和可能性,让我们假设下面有这样的布局用例:
header contenthere
nav contenthere
main contenthere
aside contenthere
footer contenthere
首先,是把元素一起放进.main里,比如,和。如果没有flexbox,我们可能会把三个元素全部进行浮动,但想让它按理想的方式工作显得并不直观。而且,按传统的方式做这件事会出现一个众所周知的问题:每一列仅仅和它的内容一样高。因此,你可能需要把三个元素都设置为统一的高度,或者使用某种黑科技。
让flexbox来救场吧。
让我们Flex
flexbox的要点是出现在display属性上的flex值,它需要被设置在容器元素上。如此设置会让它的子元素变成“弹性项目(flex item)”。这些弹性项目拥有一些易于使用的默认属性。比如,它们被紧挨着放置,那些没有特别指明宽度的元素自动占满了剩余的空间。
因此,如果你给.main设置了display:flex,它的子元素.content就被自动挤在和之间。不需要再多余的计算,多么方便是吧?作为附加奖赏,所有三个元素神奇地拥有了相同的高度。
.main{
display:flex;
}
请查看下面的例子,包含了所有的细节:flexbox-demo-1(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-1.html)。
项的顺序:Flebox的order属性
另外一个flexbox的能力,是能够轻松改变元素的显示顺序。让我们假设你为一个客户制作了上面的布局,而她现在想要.content出现在之前。
通常,你需要深入到HTML源码中去,在那里改变元素的顺序。而有了Flexbox,你可以完全使用CSS完成这项任务。只需把.content的order属性设置为-1,那么这一列就会出现在前面,这本例就是最左边。
.main{
display:flex;
}
.content{
order: -1;
}
本例中,你不需要改变其他列的order。例子在flexbox-demo-2(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-2.html)。
如果你倾向于显式地为每一列指定order,你可以将.content的order设为1,把的order设为2,把的设为3。
HTML源码独立于CSS的Flexbox样式
但你的客户并不满足。她想让成为页面的第一个元素,显示在之前。那好,同样的,flexbox是你的朋友(虽然像在此例中,可能你得跟你的客户好好谈谈,而不是跟随指示)。因为你不仅要重排列内部元素,还要重排外部的,display:flex规则将被设置在
之上。注意这里是如何在页面中嵌套使用flex容器来达到你想要的效果的。
因为,和相互堆叠着,你需要首先设置一个垂直上下文,它能够通过设置flex-direction:column来快速完成。还有,的order被设置为-1,如此一来它就出现在页面的最上头。就这么简单。
.example{
display:flex;
flex-direction:column;
}
footer{
order: -1;
}
所以,如果你想把一行元素修改为一列,或者相反,你可以使用flex-direction属性,并设置它相应地为column或row(row是默认值)。
完整的例子在flexbox-demo-3(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-3.html)。
然而,强大的能力也到来了更多的责任:谨记,一些用户可能会使用键盘来导航你的基于flexbox的网站,如果你HTML源码中元素的顺序和屏幕上显示的有所出入,那么无障碍访问的能力就成为需要认真对待的问题。如果想了解得更多,请不要错过HTML源码顺序 vs CSS显示顺序,网站无障碍访问和易用性的专家Adrian Roselli针对这个问题给出了深入讨论。
如何在Flexbox中对齐子项
Flexbox能非常直观地处理子项的水平对齐和垂直对齐。
你可以使用align-items对flex容器中的所有子项设置统一的对齐。如果你想给个别元素设置不同的对齐方式,使用align-self。元素的对齐方式跟它所在父容器的flex-direction有关。如果它的值是row(意味着元素水平排列),对齐方式是指在垂直轴上。如果flex-direction被设置为column(意味着元素垂直排列),对齐方式就是指在水平轴上。
例如,你让一些元素在容器中分别有不同的对齐方式,你需要:
设置每个元素的align-self属性为合适的值。可能的值有:center,stretch(元素撑满它的容器),flex-start,flex-end和baseline(元素被放置在父容器的baseline上)
把容器元素设置为display:flex
最后,注意父容器的flex-direction属性,因为它关系到子元素的对齐方式。
.example{
display:flex;
flex-direction:column;
}
.red{
align-self:center;
}
.blue{
align-self:flex-start;
}
.pink{
align-self:flex-end;
}
试试在下面的例子中,把父容器的flex-direction在row和column之间切换,看看它们引起的实时变化。
例子flexbox-demo-4.html(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-4.html)。
如果想要容器中所有的元素有统一的对齐方式,你可以在容器上使用align-items。可以的值有center,flex-start,flex-end,stretch(默认值:子项被拉伸以适应它们的容器)和baseline(子项被放置在父容器的baseline上)。
.example{
display:flex;
align-items:center;
}
像往常一样,试着把父容器的flex-direction在row和column之间切换,看看它们如何影响着你设置align-items值时所发生的作用。
例子flexbox-demo-5.html(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-5.html)
在Flexbox里两端对齐
另一个控制对齐的属性是justify-content,当你想让多个元素等分空间时非常有用。
可接受的值有:center,flex-start,flex-end, space-between(元素利用主轴之间的空间而排布)和space-around(元素利用主轴之前、之间和之后的空间而排布)。
例如,在之前你一直使用的简单HTML模板里,你可以在里找到三个元素:,.content和。之前,它们都被挤在页面的左边。如果你想让它们之间有一些空间,但是不让第一个元素的左边有空间,也不想让最后一个元素的右边有空间,你可以把.main(即它们的父容器)里的justify-content设置为space-between。
.main{
display:flex;
justify-content:space-between;
}
也试一下设置为space-around,观察不同的结果。例子在flexbox-demo-6(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-6.html)。
在上面的例子中,我同样把中的文字水平和垂直对齐了,分别是把justify-content(水平居中)和align-items(垂直居中)都设置为center。
header{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
Flexbox中弹性子项的大小
使用flex属性,你能够对照flex容器中其他元素来控制弹性子项的大小。
这个属性是以下独立属性的简写:
flex-grow:一个数字,指明元素如何相对其他flex项来拉伸
flex-shrink:一个数字,指明元素如何相对其他flex项来收缩
flex-basis:元素的长度。可接受的值有:auto,inherit或者一个数字后面紧跟着%,px,em或其他长度单位。
例如,想得到三个等宽的列,只需给每一列设置flex:1,其他什么都不用做:
nav,aside,.content{
flex:1;
}
如果你需要.content占据和的两倍宽,那么就把.content设为flex:2,让其他两个为1。
例子在flexbox-demo-7.html(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-7.html)。
那仅仅是对flex属性最简单的应用。同样可以设置flex-grow,flex-shrink和flex-basis这些值,不过那超出本文的话题范围了。
进一步的资源
如果你准备好继续前进,并想学着精通flexbox的更多东西,请查看下面的资源:
Flexbox SitePoint上Guy Routledge制作的一个付费课程
Building Mega Menus with Flexbox
How 3 Modern Tools are Using Flexbox Grids
Make Forms Fun with Flexbox.
总结
如你所见,如果我们想控制元素在网页中的布局,flexbox可以让我们的生活更加轻松。它非常稳固和可靠,让以前那些我们每天使用的诸如使 让容器坍缩之类的奇技淫巧,成为了过去。
像我们说的,如今,在针对整个页面进行布局时,CSS网格是更好的方案,但我们仍然值得去了解flexbox能做的那些事情。flexbox的最佳应用场景,体现在对元素的一维排列上,但如果有需要,它也能在稍老旧的浏览器中,为CSS网格布局提供方便的替代方案。
上一篇: box-pack
推荐阅读
-
最简单易懂的 C 语言开发环境构建教程,分分钟教你如何在 Windows 中运行第一个 Hello World 程序!
-
最新、最详细的 Python 开发环境构建与 PyCharm 安装配置教程【图+文】【简单易懂】。
-
在格式工厂中使用剪辑音频的简单教程分享
-
最简单的 IntelliJ IDEA 安装教程(白色也可一次性安装)
-
针对 Flexbox 新手的简单教程。
-
简单易懂的 Flexbox 布局入门指南。
-
ES 学习教程 - 前言 什么是 es? es 是一个基于 Apache Lucene 的开源分布式(全文)搜索引擎,它提供了一个简单的 RESTful API 来隐藏 Lucene 的复杂性。 除了是一个全文搜索引擎,es 还可以描述如下: 分布式实时文件存储,每个字段都有索引并可被搜索 分布式实时分析搜索引擎 可扩展至数百或数千台服务器,处理 PB 级的结构化或非结构化数据。 ES 的数据组织类比
-
摄影新手应该购买什么样的器材?摄影笔记理论教程 Extra 1
-
epoll简介及触发模式(accept、read、send)-epoll的简单介绍 epoll在LT和ET模式下的读写方式 一、epoll的接口非常简单,一共就三个函数:1. int epoll_create(int size);创建一个epoll的句柄,size用来告诉内核这个监听的数目一共有多大。这个参数不同于select中的第一个参数,给出最大监听的fd+1的值。需要注意的是,当创建好epoll句柄后,它就是会占用一个fd值,在linux下如果查看/proc/进程id/fd/,是能够看到这个fd的,所以在使用完epoll后,必须调用close关闭,否则可能导致fd被耗尽。2. int epoll_ctl(int epfd, int op, int fd, struct epoll_event *event);epoll的事件注册函数,它不同与select是在监听事件时告诉内核要监听什么类型的事件,而是在这里先注册要监听的事件类型。第一个参数是epoll_create的返回值,第二个参数表示动作,用三个宏来表示:EPOLL_CTL_ADD:注册新的fd到epfd中;EPOLL_CTL_MOD:修改已经注册的fd的监听事件;EPOLL_CTL_DEL:从epfd中删除一个fd;第三个参数是需要监听的fd,第四个参数是告诉内核需要监听什么事,struct epoll_event结构如下:struct epoll_event { __uint32_t events; /* Epoll events */ epoll_data_t data; /* User data variable */};events可以是以下几个宏的集合:EPOLLIN :表示对应的文件描述符可以读(包括对端SOCKET正常关闭); EPOLLIN事件:EPOLLIN事件则只有当对端有数据写入时才会触发,所以触发一次后需要不断读取所有数据直到读完EAGAIN为止。否则剩下的数据只有在下次对端有写入时才能一起取出来了。现在明白为什么说epoll必须要求异步socket了吧?如果同步socket,而且要求读完所有数据,那么最终就会在堵死在阻塞里。 EPOLLOUT:表示对应的文件描述符可以写; EPOLLOUT事件:EPOLLOUT事件只有在连接时触发一次,表示可写,其他时候想要触发,那要先准备好下面条件:1.某次write,写满了发送缓冲区,返回错误码为EAGAIN。2.对端读取了一些数据,又重新可写了,此时会触发EPOLLOUT。简单地说:EPOLLOUT事件只有在不可写到可写的转变时刻,才会触发一次,所以叫边缘触发,这叫法没错的!其实,如果真的想强制触发一次,也是有办法的,直接调用epoll_ctl重新设置一下event就可以了,event跟原来的设置一模一样都行(但必须包含EPOLLOUT),关键是重新设置,就会马上触发一次EPOLLOUT事件。1. 缓冲区由满变空.2.同时注册EPOLLIN | EPOLLOUT事件,也会触发一次EPOLLOUT事件这个两个也会触发EPOLLOUT事件 EPOLLPRI:表示对应的文件描述符有紧急的数据可读(这里应该表示有带外数据到来);EPOLLERR:表示对应的文件描述符发生错误;EPOLLHUP:表示对应的文件描述符被挂断;EPOLLET: 将EPOLL设为边缘触发(Edge Triggered)模式,这是相对于水平触发(Level Triggered)来说的。EPOLLONESHOT:只监听一次事件,当监听完这次事件之后,如果还需要继续监听这个socket的话,需要再次把这个socket加入到EPOLL队列里3. int epoll_wait(int epfd, struct epoll_event * events, int maxevents, int timeout);等待事件的产生,类似于select调用。参数events用来从内核得到事件的集合,maxevents告之内核这个events有多大,这个maxevents的值不能大于创建epoll_create时的size,参数timeout是超时时间(毫秒,0会立即返回,-1将不确定,也有说法说是永久阻塞)。该函数返回需要处理的事件数目,如返回0表示已超时。-------------------------------------------------------------------------------------------- 从man手册中,得到ET和LT的具体描述如下EPOLL事件有两种模型:Edge Triggered (ET)Level Triggered (LT)假如有这样一个例子:1. 我们已经把一个用来从管道中读取数据的文件句柄(RFD)添加到epoll描述符2. 这个时候从管道的另一端被写入了2KB的数据3. 调用epoll_wait(2),并且它会返回RFD,说明它已经准备好读取操作4. 然后我们读取了1KB的数据5. 调用epoll_wait(2)......Edge Triggered 工作模式:如果我们在第1步将RFD添加到epoll描述符的时候使用了EPOLLET标志,那么在第5步调用epoll_wait(2)之后将有可能会挂起,因为剩余的数据还存在于文件的输入缓冲区内,而且数据发出端还在等待一个针对已经发出数据的反馈信息。只有在监视的文件句柄上发生了某个事件的时候 ET 工作模式才会汇报事件。因此在第5步的时候,调用者可能会放弃等待仍在存在于文件输入缓冲区内的剩余数据。在上面的例子中,会有一个事件产生在RFD句柄上,因为在第2步执行了一个写操作,然后,事件将会在第3步被销毁。因为第4步的读取操作没有读空文件输入缓冲区内的数据,因此我们在第5步调用 epoll_wait(2)完成后,是否挂起是不确定的。epoll工作在ET模式的时候,必须使用非阻塞套接口,以避免由于一个文件句柄的阻塞读/阻塞写操作把处理多个文件描述符的任务饿死。最好以下面的方式调用ET模式的epoll接口,在后面会介绍避免可能的缺陷。 i 基于非阻塞文件句柄 ii 只有当read(2)或者write(2)返回EAGAIN时才需要挂起,等待。但这并不是说每次read时都需要循环读,直到读到产生一个EAGAIN才认为此次事件处理完成,当read返回的读到的数据长度小于请求的数据长度时,就可以确定此时缓冲中已没有数据了,也就可以认为此事读事件已处理完成。Level Triggered 工作模式相反的,以LT方式调用epoll接口的时候,它就相当于一个速度比较快的poll(2),并且无论后面的数据是否被使用,因此他们具有同样的职能。因为即使使用ET模式的epoll,在收到多个chunk的数据的时候仍然会产生多个事件。调用者可以设定EPOLLONESHOT标志,在 epoll_wait(2)收到事件后epoll会与事件关联的文件句柄从epoll描述符中禁止掉。因此当EPOLLONESHOT设定后,使用带有 EPOLL_CTL_MOD标志的epoll_ctl(2)处理文件句柄就成为调用者必须作的事情。然后详细解释ET, LT:LT(level triggered)是缺省的工作方式,并且同时支持block和no-block socket.在这种做法中,内核告诉你一个文件描述符是否就绪了,然后你可以对这个就绪的fd进行IO操作。如果你不作任何操作,内核还是会继续通知你的,所以,这种模式编程出错误可能性要小一点。传统的select/poll都是这种模型的代表.ET(edge-triggered)是高速工作方式,只支持no-block socket。在这种模式下,当描述符从未就绪变为就绪时,内核通过epoll告诉你。然后它会假设你知道文件描述符已经就绪,并且不会再为那个文件描述符发送更多的就绪通知,直到你做了某些操作导致那个文件描述符不再为就绪状态了(比如,你在发送,接收或者接收请求,或者发送接收的数据少于一定量时导致了一个EWOULDBLOCK 错误)。但是请注意,如果一直不对这个fd作IO操作(从而导致它再次变成未就绪),内核不会发送更多的通知(only once),不过在TCP协议中,ET模式的加速效用仍需要更多的benchmark确认(这句话不理解)。在许多测试中我们会看到如果没有大量的idle -connection或者dead-connection,epoll的效率并不会比select/poll高很多,但是当我们遇到大量的idle- connection(例如WAN环境中存在大量的慢速连接),就会发现epoll的效率大大高于select/poll。(未测试)另外,当使用epoll的ET模型来工作时,当产生了一个EPOLLIN事件后,读数据的时候需要考虑的是当recv返回的大小如果等于请求的大小,那么很有可能是缓冲区还有数据未读完,也意味着该次事件还没有处理完,所以还需要再次读取: 这里只是说明思路(参考《UNIX网络编程》) while(rs) {buflen = recv(activeevents[i].data.fd, buf, sizeof(buf), 0);if(buflen < 0){// 由于是非阻塞的模式,所以当errno为EAGAIN时,表示当前缓冲区已无数据可读// 在这里就当作是该次事件已处理处.if(errno == EAGAIN)break; else return; }else if(buflen == 0) { // 这里表示对端的socket已正常关闭. } if(buflen == sizeof(buf) rs = 1; // 需要再次读取 else rs = 0; } 还有,假如发送端流量大于接收端的流量(意思是epoll所在的程序读比转发的socket要快),由于是非阻塞的socket,那么send函数虽然返回,但实际缓冲区的数据并未真正发给接收端,这样不断的读和发,当缓冲区满后会产生EAGAIN错误(参考man send),同时,不理会这次请求发送的数据.所以,需要封装socket_send的函数用来处理这种情况,该函数会尽量将数据写完再返回,返回-1表示出错。在socket_send内部,当写缓冲已满(send返回-1,且errno为EAGAIN),那么会等待后再重试.这种方式并不很完美,在理论上可能会长时间的阻塞在socket_send内部,但暂没有更好的办法. ssize_t socket_send(int sockfd, const char* buffer, size_t buflen) { ssize_t tmp; size_t total = buflen; const char *p = buffer; while(1) { tmp = send(sockfd, p, total, 0); if(tmp < 0) { // 当send收到信号时,可以继续写,但这里返回-1. if(errno == EINTR) return -1; // 当socket是非阻塞时,如返回此错误,表示写缓冲队列已满, // 在这里做延时后再重试. if(errno == EAGAIN) { usleep(1000); continue; } return -1; } if((size_t)tmp == total) return buflen; total -= tmp; p += tmp; } return tmp; } 二、epoll在LT和ET模式下的读写方式 在一个非阻塞的socket上调用read/write函数, 返回EAGAIN或者EWOULDBLOCK(注: EAGAIN就是EWOULDBLOCK) 从字面上看, 意思是: * EAGAIN: 再试一次 * EWOULDBLOCK: 如果这是一个阻塞socket, 操作将被block * perror输出: Resource temporarily unavailable 总结: 这个错误表示资源暂时不够, 可能read时, 读缓冲区没有数据, 或者, write时,写缓冲区满了 。 遇到这种情况, 如果是阻塞socket, read/write就要阻塞掉。 而如果是非阻塞socket, read/write立即返回-1, 同 时errno设置为EAGAIN. 所以, 对于阻塞socket, read/write返回-1代表网络出错了. 但对于非阻塞socket, read/write返回-1不一定网络真的出错了. 可能是Resource temporarily unavailable. 这时你应该再试, 直到Resource available. 综上, 对于non-blocking的socket, 正确的读写操作为: 读: 忽略掉errno = EAGAIN的错误, 下次继续读 写: 忽略掉errno = EAGAIN的错误, 下次继续写 对于select和epoll的LT模式, 这种读写方式是没有问题的. 但对于epoll的ET模式, 这种方式还有漏洞. epoll的两种模式 LT 和 ET
-
猫几句_CAT 工具教程与常见问题-SDL Trados 2021 来了,分享一些简单的评测经验!