图解CSS3-flex布局

Freeman 发布于2019-04-23 11:42 / 700人阅读

摘要：前言前言最近笔者在复习以前基础知识，发现很多细的知识点还是需要重新再总结一番。第一个子元素和最后一个子元素与边框也会有一定的距离。同时也欢迎大家在上和我一起进阶前端。找到我找到我知乎

前言

最近笔者在复习以前基础知识，发现很多细的知识点还是需要重新再总结一番。本文对flex布局进行图解说明，以后忘了的同学可以随时过来查看，欢迎转载，烦请注明出处。

主体

万丈高楼平地起，熟悉flex，先来了解下以下7种css属性

display: flex;
/* 设置父级元素flex模式 */

flex-direction: column;
/* 设置子级元素排列方式，主轴是哪一根（横/竖） */

flex-wrap: wrap;
/* 决定子级元素一行排列不下时，是否换行 */

flex-flow: row nowrap;
/* flex-direction和flex-wrap的综合体 */

justify-content: center;
/* 项目在主轴上的对齐方式 */

align-items: center;
/* 项目在侧轴上的对齐方式 */

align-content: space-between;
/* 多行项目的对齐方式 */

下面我们就对每个属性进行详细的探讨：

flex-direction: 绝对主轴的方向

row 默认水平方向，起点在左边
row-reverse 水平方向，起点在右边
column垂直方向，起点在上沿
column-reverse垂直方向，起点在下沿

display: flex;

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap 当项目在一条轴线上排不下时，是否换行

wrap换行
nowrap （默认）不换行
wrap-reverse 换行，第一行在最下面

display: flex;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: flex-direction和flex-wrap的集合，也就是说这个属性是后面两个属性的结合方式

row nowrap （默认）水平方向，起点在左端，不换行

display: flex;

flex-flow:  || ;

详细可参考如上单个属性的解释

justify-content 定义项目在主轴上的对齐方式

flex-start左边对齐
flex-end 右边对齐
center居中对齐
space-between 两端对齐，空格在中间
space-around空格环绕

display: flex;

justify-content: flex-start | flex-end | center | space-between | space-around;

这里对space-between和space-around做一个简单的区别说明：

相同点：子元素都会自动排好，彼此之间距离相等
不同点：space-between两端对齐，第一个子元素和最后一个子元素会贴着父级元素的边框。space-around 第一个子元素和最后一个子元素与边框也会有一定的距离。
align-items项目在侧轴的对齐方式

flex-start 顶部对齐，即文字图片等顶部同一条线上
flex-end 底部对齐，即文字图片等底部在同一条线上
center中间对齐，即文字图片不管多高，都拿它们的中间放在同一条线上
stretch将文字图片充满整个容器的高度，强制统一
baseline将每项的第一行文字做统一在一条线上对齐

display: flex;

align-items: flex-start | flex-end | center | stretch | baseline;

align-content定义多行项目的对齐方式。如果只有一行项目，该属性不起作用

flex-start这几行顶部对齐
flex-end这几行底部对齐
center这几行居中对齐
stretch这几行进行扩展或者缩放，从而填满容器高
space-between这几行中间使用空格进行填充(两端对齐)
space-around这几行用空格进行围绕（两边及中间）

display: flex;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

后缀

如果你觉得这个对你有帮助，欢迎转载，烦请注明出处。同时也欢迎大家在GitHub上和我一起进阶前端。

找到我：GitHub

找到我：知乎

GPU云服务器云服务器图解安装图解 webrtc图解排序算法图解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1031.html

前端学习资源

摘要：提供了完整的环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。 react 新特性 react16 Context 算法相关图解排序算法(二)之希尔排序微信小程序微信小程序组件化的解决方案移动端尺寸基本知识浏览器前端必读：浏览器内部工作原理浏览器缓存原理解读浏览器加载css和js及dom解析之间的关系浏览器缓存 CSS学习移动web开发布局入...

zhisheng 2019-08-20 13:33 评论0 收藏0
图解——PyQt4从入门到运用

摘要：将程序包装在界面里，可以将输入通过多种途径如文本框弹出路径选择等输入到程序里。将输出通过文本框显示出来将执行信息如如报错信息运行进度通过文本框或进度条显示出来文章安排先介绍安装和配合的使用。作为一个程序的开发者，我们仅仅需要在相应路径通过命令行就可执行那个程序。但是，不懂行的人不理解这个黑框框的东西，陌生领域任何人都没有安全感，所以他们是拒绝接受一个项目仅仅只是通过一个黑框框来执行的...

史占广 2019-07-25 10:25 评论0 收藏0
Flex布局

摘要：布局干什么用常常会因为元素居中之类的问题苦恼，这时就可以借助，它为盒状模型提供强大的灵活性。基本概念采用布局的元素，称为容器，简称容器，容器子元素称为项目，简称项目。 Flex布局干什么用？常常会因为元素居中之类的问题苦恼，这时就可以借助Flex（Flexible Box），它为盒状模型提供强大的灵活性。基本概念采用Flex布局的元素，称为Flex容器，简称容器，容器子元素称为F...

dongfangyiyu 2019-08-29 12:15 评论0 收藏0
浅谈瀑布流

摘要：瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。那么规则是什么呢下面通过图解来分析一下瀑布流的算法。看懂这个图示应该就能理解了瀑布流的原理算法。瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。瀑布流布局效果即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，...

番茄西红柿 2019-04-23 13:27 评论0 收藏0