flex布局学习
来源:互联网 发布:小世界网络模型应用 编辑:程序博客网 时间:2024/06/05 17:16
Flex布局学习笔记
主要学习资料阮一峰老师的blog
个人对于flex布局的理解:通过对某个容器中横纵两条轴上元素的分布的变化,实现的布局。也可以设置容器内元素的具体属性实现针对于某个元素的调整。
基础的属性还是要在使用中才能掌握,而且阮一峰老师对于flex的基本属性解释的非常详细,我就不再列举了。下面是针对于一些实例进行的代码的分析。
tips:
- 以下所有实例都借鉴于阮老师的博客
- 以下所有的图中若无特殊声明,浅灰色的为外层容器,class为container,深灰色的内层项目,class为item
单项目
没有设置任何属性时的情况:
只设置外层容器container的display:flex就可以达成以上效果。
.container { display: flex; }
项目水平居中
在flex布局中,最重要的莫过于那两条互相垂直的轴了,主轴是默认是水平的,所以想要将某个元素水平居中,只需要将主轴上的布局修改为居中的布局就可以了。
.container { display: flex; justify-content: center; }
项目向右对齐
默认的对齐方式是向左的,所以想要实现向右对齐,也只需要改变容器主轴的布局方式为向左对齐即可。其实在flex中为了使得轴的方向改变之后语义仍然没有问题,这里应该改为向主轴的末端对齐。
.container { display: flex; justify-content: flex-end; }
垂直居中
前面我们都是一直在一个轴上的操作,想要实现垂直居中就要使用另一个和主轴垂直的交叉轴了。交叉轴上的操作和主轴上的操作是类似的,只需要改变布局方式就可以了。不同的只是属性罢了。
.container { display: flex; align-items: center; }
水平垂直居中
水平垂直居中的话只需要把两个轴的布局都设置为居中就可以了。
.container { display: flex; align-items: center; justify-content: center; }
两个轴的操作基本上就是这样子的,对于一个项目的的布局,仅仅使用这两个轴的布局已经绰绰有余。
双项目
两个项目分居两边
其实这样的布局,也是轴的基本布局的一种,可以通俗的理解为将容器中的项目在轴的方向上两端对齐,项目之间的间隔是相等的。
.container { display: flex; justify-content: space-between; }
竖直方向上的两端对齐
一眼就能看出来,这个不就是上一个倒了一下么,所以我们只需要把轴转一下就可以实现这个效果了。
.container { display: flex; flex-direction: column; justify-content: space-between; }
两端对齐加居中
这个跟上一个也没有多大的变化,只不过水平居中了一下。那么是不是只需要改一下主轴的布局就可以了。这里就需要注意一下了,由于我们之前已经将主轴的方向修改过了,所以主轴现在竖直的,因此修改主轴是不行的。这时另一个轴的方向,也会随着主轴方向的改变而改变,毕竟名叫交叉轴嘛。所以我们只需要在上一个的基础上,修改交叉轴的布局为居中就可以了。
.container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
两个项目位于对角线上
想要实现这样的布局,只靠两个轴的布局显然是不同的,因为两个项目的布局方式是不一样的,第一个是默认的布局方式,而第二个则是在交叉轴上的居中操作,想明白了这一点,就好办了,使用align-self对第二个项目修改布局方式就可以了。
.container { display: flex; } .item:nth-child(2) { align-self: center; }
两个项目处于两个角
这个其实跟上一个也差不多,一样的思路,可以知道第二个项目是需要使用self属性单独设置的,但是在水平方向上两个处于两端要怎么实现呢?是的了,这时就需要对容器的主轴使用space-between布局了。
.container { display: flex; justify-content: space-between; } .item:nth-child(2) { align-self: flex-end; }
三项目
最基本的三个项目
最基本的布局方式,只需要让容器display:flex就可以了
对角线三项目
这个其实跟前面的两个项目处于对角线上是一个道理。所以也只需要把第二个和第三个项目单独设置一下就可以了。
.container { display: flex; } .item:nth-child(2) { align-self: center; } .item:nth-child(3) { align-self: flex-end; }
四项目
三一分隔
首先第一行是正常的布局,不用管。而本来应该在第二行的第四个项目到了第三行,显然是space-between布局,并且到了最后一列,所以主轴的布局方式也应该改变为flex-end。这里需要注意的是,由于需要多行多列,所以需要设置flex-wrap属性为wrap,即可换行,否则每个项目的大小将会被压缩。除此之外,由于不止一行,所以在设置交叉轴上的布局方式时要是用align-content属性。
.container { display: flex; flex-wrap: wrap; align-content: space-between; justify-content: flex-end; }
如此复杂的布局都只是使用容器的属性进行布局的,真的很神奇。
四个项目四个角
四个项目被分到了四个角,可以想到将四个项目分为两组,分别在水平和垂直方向上使用space-between就可以了。
.container { display: flex; justify-content: space-between; } .column { display: flex; flex-direction: column; justify-content: space-between; }
圣杯布局
<div class="container"> <header></header> <div class="mainbody"> <div class="content"></div> <nav class="nav"></nav> <aside class="aside"></aside> </div> <footer></footer> </div>
.container { display: flex; flex-direction: column; } header { flex: 1; } footer { flex: 1; } .mainbody { flex: 1; display: flex; } .nav { order: -1; }
其中包括两个flex部分,一个是最外围的container,还有一个是mainbody。
其中为了使得mainbody中的content即主要内容有限加载,将content标签放在了最前面,但是又想要content部分在中间,所以使用了order对flex中的项目进行排序。
搞完这个,果然对‘弹性’布局的理解更深了。
总结
flex既然能够作为一套完整的布局体系,就不是一时半会儿能够完全搞清楚的。这次也是对于flex布局有了一个大致的了解,以后如果学到了新的内容或者有了新的感悟,还会继续更新。毕竟才刚刚入门,其中的很多细节还是知之甚少,如文中有误,欢迎指出,学习讨论。
- Flex 学习 Flex布局 弹性布局
- Flex布局学习笔记
- Flex布局学习笔记
- 学习flex布局
- flex布局学习记录
- Flex布局学习札记
- Flex布局学习总结
- flex布局学习笔记
- flex布局初步学习
- flex弹性布局学习
- flex布局学习
- Flex 学习笔记 之 flex 页面布局
- Flex Box布局学习- 语法
- Flex(弹性布局)学习笔记。
- flex布局的学习总结
- css flex布局学习地址
- Flex 布局之学习笔记
- Flex 3 布局容器学习笔记
- Log4j的配置
- Linux 服务器如何设置文件和文件夹的读写权限
- java学习第49天,多级目录下创建文件 listFiles方法
- 消息队列在项目中的使用总结
- 数据库系统知识点整理
- flex布局学习
- Android.mk入门
- 171116-两个简单的数组练习【连续第二十四天】
- G++ 常用命令选项
- 试试水
- 【计算机网络】网络安全知识要点
- Effective Java读书笔记——第二章(1刷)
- BZOJ 3714 [PA2014]Kuglarz
- win7环境python34安装scrapy框架