模拟城市完美布局平面图_css四大布局

模拟城市完美布局平面图_css四大布局我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了。flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布局的改变,最后再对属性做一个汇总先看一下flex的基本模型,如下图所示:container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了。

flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布局的改变,最后再对属性做一个汇总

先看一下flex的基本模型,如下图所示:

模拟城市完美布局平面图_css四大布局

container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布局模型了,上图中还有主轴和纵轴分别是布局的一个方向,后面的属性会详细说到。

接下来就先从flex-container属性开始介绍

1.flex-container

1.1 flex-direction(主轴方向)

     flex-direction:row;   (布局为一行,从start开始排)

模拟城市完美布局平面图_css四大布局

flex-direction:row-reverse;    (布局为一行,从end开始排)

模拟城市完美布局平面图_css四大布局

flex-direction:column;    (布局为一列,从start开始排)

模拟城市完美布局平面图_css四大布局

flex-direction:column-reverse;   (布局为一列,从end开始排)

模拟城市完美布局平面图_css四大布局

 

1.2  flex-wrap(一条轴线排不下如何换行)

flex-wrap:nowrap; (不换行,在一行显示,即使子元素的宽度或者高度大于父元素的宽度或者高度,也在一行显示)

模拟城市完美布局平面图_css四大布局

flex-wrap:wrap; (内容超过后换行)

模拟城市完美布局平面图_css四大布局

flex-wrap:wrap-reverse; (换行后有两条轴线,reverse就是把轴线排列的顺序倒置过来)

模拟城市完美布局平面图_css四大布局

1.3 justify-content (主轴对齐方式)

justify-content:flex-start; (start侧对齐,左对齐)

模拟城市完美布局平面图_css四大布局

justify-content:flex-end;   (end侧对齐,右对齐)

模拟城市完美布局平面图_css四大布局

justify-content:center  (中心对齐)

模拟城市完美布局平面图_css四大布局

justify-content:space-between;(左右两侧没有间距,中间间距相同)

模拟城市完美布局平面图_css四大布局

justify-content:space-around;    (左右两侧的间距为中间间距的一半)

模拟城市完美布局平面图_css四大布局

1.4  align-items(交叉轴对齐方式)

align-items:stretch;   (拉伸)

模拟城市完美布局平面图_css四大布局

align-items:flex-start;   (start侧开始,上对齐)

模拟城市完美布局平面图_css四大布局

align-items:flex-end;    (end侧开始,下对齐)

模拟城市完美布局平面图_css四大布局

align-items:center;         (中心对齐)

模拟城市完美布局平面图_css四大布局

align-items:baseline;   (基线对齐)

模拟城市完美布局平面图_css四大布局

1.5 align-content  (多根轴线对齐方式)

align-content :stretch;   (拉伸)

模拟城市完美布局平面图_css四大布局

align-content :flex-start;   (start侧开始,上对齐)

模拟城市完美布局平面图_css四大布局

align-content :flex-end;   (end侧开始,下对齐)

模拟城市完美布局平面图_css四大布局

align-content :center;       (中心对齐)

模拟城市完美布局平面图_css四大布局

align-content:space-between;  (上下没有间距,中间各子元素间距相同)
模拟城市完美布局平面图_css四大布局

align-content:space-around;     (上下间距之和等于中间各个间距)

模拟城市完美布局平面图_css四大布局

 

2.flex-item相关属性

flex-item中的5个属性分别是order, flex-grow, flex-shrink, flex-basis, flex-self (分别对应下面的0,0,1,auto,auto初始顺序是123)

模拟城市完美布局平面图_css四大布局

2.1  order(排列顺序)

模拟城市完美布局平面图_css四大布局

2.2 flex-grow(放大比例,剩余空间怎么分配,如下图所示,剩余空间的分配比例是1:2:1)

模拟城市完美布局平面图_css四大布局

2.3 flex-shrink (缩小比例,超出空间怎么压缩)

模拟城市完美布局平面图_css四大布局

2.4 flex-basis  (item所占主轴空间,优先级高于width)

模拟城市完美布局平面图_css四大布局

2.5  align-self  (对齐方式,取值和align相同,覆盖align-items)

模拟城市完美布局平面图_css四大布局

 

3.属性总结

flex-container的属性有flex-direction,  flex-wrap,  justify-content,  align-items,  align-content

flex-direction(主轴方向):  1) row(布局为一行,从start开始排)

                                        2) row-reverse(布局为一行,从end开始排)

                                        3) column(布局为一列,从start开始排)

                                        4) column-reverse(布局为一列,从end开始排)

flex-wrap(一条轴线排不下如何换行):1) nowarp (不换行,在一行显示)

                                                            2) wrap(内容超过后换行)

                                                            3) warp-reverse(换行后有两条轴线,reverse就是把轴线排列的顺序倒置过来)

justify-content(主轴对齐方式):1) flex-start (start侧对齐,左对齐)

                                                  2) flex-end(end侧对齐,右对齐)

                                                  3) center(中心对齐)

                                                  4) space-between(左右两侧没有间距,中间间距相同)

                                                  5) justify-content:space-around(左右两侧的间距为中间间距的一半)

align-items(交叉轴对齐方式):  1)align-items:stretch;   (拉伸)

                                                  2)align-items:flex-start(start侧开始,上对齐)

                                                  3)align-items:flex-end(end侧开始,下对齐)

                                                  4)align-content :center (中心对齐)

                                                  5)align-items:baseline(基线对齐)

align-content(多根轴线对齐方式):  1)align-content :stretch  (拉伸)

                                                       2)align-content :flex-start  (start侧开始,上对齐)

                                                       3)align-content :flex-end(end侧开始,下对齐)

                                                       4)align-content :center  (中心对齐)

                                                       5)align-content:space-between(上下没有间距,中间各子元素间距相同)

                                                       6)align-content:space-around  (上下间距之和等于中间各个间距)

flex-item相关属性有order,flex-grow,flex-shrink,lex-basis,align-self

order(排列顺序)

flex-grow(放大比例,剩余空间怎么分配,如下图所示,剩余空间的分配比例是1:2:1)

flex-shrink (缩小比例,超出空间怎么压缩)

flex-basis  (item所占主轴空间,优先级高于width)

align-self  (对齐方式,覆盖align-items)

 

只要搞懂每个属性的功能,自己在调试演示一下,flex布局应该没有什么问题!!

调试的网站推荐  CSS的flex布局调试

这些属性综合起来,真的是可以做出超级多的布局!!

 

 

 

本博客由博主原创,如需转载需说明出处!谢谢支持!

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/230905.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • C语言矩阵求逆(c语言求矩阵的局部最大值)

    采用高斯消去法求逆直接上代码voidMatrix_inverse(doublearc[6][6],intn,doubleans[6][6])//计算矩阵的逆{ inti,j,k;//列 doublemax,tempA,tempB,P; intmax_num; doublearcs[6][6]; memcpy(arcs,arc,288); f…

  • RPN网络代码解读

    RPN网络代码解读1.说在前面的话在目标检测领域FasterRCNN可以说是无人不知无人不晓,它里面有一个网络结构RPN(RegionProposalNetwork)用于在特征图上产生候选预测区域。但是呢,这个网络结构具体是怎么工作的呢?网上有很多种解释,但是都是云里雾里的,还是直接撸代码来得直接,这里就直接从代码入手直接撸吧-_-||。首先,来看一下FasterRCNN中RPN的结构是什么样子的吧。…

  • SSL证书与Https应用部署小结

    SSL证书与Https应用部署小结

  • 开发手机游戏的一点心得(一)

    开发手机游戏的一点心得(一)作者:风过回廊文章来源:http://www.sf.org.cn2003年三月份,我刚开始接触了手机游戏的开发。开发手机上的游戏程序,最初仅仅只是出于兴趣爱好,利用业余时间自己陆陆续续的也写了一些Code,得到了一些经验,本来是想敝帚自珍的,但是朋友的鼓励,使我决定把自己的一点点心得体会写出来,藉以告慰我在学习中所阵亡的千千万万脑细胞,也为和我一样在黑暗的艰难摸索人们中提供一些微不足道的帮助吧

  • 算法 – 堆排序(C#)

    算法 – 堆排序(C#)分享一个大牛的人工智能教程。零基础!通俗易懂!风趣幽默!希望你也加入到人工智能的队伍中来!请点击http://www.captainbed.net/**堆排序是一种选择排序,时间复杂度为O(nlog<sub>2</sub>n)。**堆排序的特点是:*在排序过程中,将待排序数组看成是一棵完全二叉树的顺序存储结构,*利用完全二叉树中父结点和…

  • Visifire图表控件的使用「建议收藏」

    Visifire图表控件的使用「建议收藏」1.在实际项目开展中,往往会牵扯到需要绘制图表的情况。而Visifire是一个比较美观大方的第三方图表控件,本文会讲述如何初步使用Visifire控件。首先我们需要从Visifire的官方网站下载:http://www.visifire.com/,新建一个项目,引入SLVisifire.Charts.dll。在MainPage.xaml.cs代码中添加代码:usingVisifire.Charts;准备工作做好了,此时我在这里直接编写了一个函数如下://////创建一个图表/////

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号