文档章节

图解CSS3-flex布局

o
 osc_w9s1w4o0
发布于 2019/04/01 00:53
字数 827
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

前言

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

主体

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

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;
/* 多行项目的对齐方式 */

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

  1. flex-direction: 绝对主轴的方向
  • row 默认水平方向,起点在左边
  • row-reverse 水平方向,起点在右边
  • column垂直方向,起点在上沿
  • column-reverse垂直方向,起点在下沿
display: flex;

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

  1. flex-wrap 当项目在一条轴线上排不下时,是否换行
  • wrap换行
  • nowrap (默认)不换行
  • wrap-reverse 换行,第一行在最下面
display: flex;

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

  1. flex-flow: flex-directionflex-wrap的集合,也就是说这个属性是后面两个属性的结合方式
  • row nowrap (默认)水平方向,起点在左端,不换行
display: flex;

flex-flow: <flex-direction> || <flex-wrap>;

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

  1. 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-betweenspace-around做一个简单的区别说明:

  1. 相同点:子元素都会自动排好,彼此之间距离相等

  2. 不同点:space-between两端对齐,第一个子元素和最后一个子元素会贴着父级元素的边框。space-around 第一个子元素和最后一个子元素与边框也会有一定的距离。

  3. align-items项目在侧轴的对齐方式

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

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

  1. 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上和我一起进阶前端。

找到我:<a href="https://github.com/pubdreamcc">GitHub</a>

找到我:<a href="https://www.zhihu.com/people/dream-cc-30/activities">知乎</a>

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

SikuliX简介及安装

一、简单介绍 SikuliIDE和Sikuli Script就是现在的SikuliX,最新版本是SikuliX1.1.0, 部分兼容Sikuli JAVA API,支持Python和Ruby,SikuliX通过定位图像和键盘鼠标来操作GUI(图形化用户界面...

osc_r5t7sskd
27分钟前
6
0
Above the Median

Above the Median 农夫约翰把他的N(1 <= N <= 100,000)奶牛排在一排来衡量他们的高度,牛i有:高度H_I(1 <= H_I <= 1,000, 000,000)纳米 – 因为FJ认为他需要精确测量!他想选择一些连续...

osc_3k29rnjy
29分钟前
6
0
Above the Median

Above the Median 农夫约翰把他的N(1 <= N <= 100,000)奶牛排在一排来衡量他们的高度,牛i有:高度H_I(1 <= H_I <= 1,000, 000,000)纳米 – 因为FJ认为他需要精确测量!他想选择一些连续...

osc_8nnvoyb1
30分钟前
9
0
python3连接mysql 稍微进阶 + 日期处理

1.踩了个操作中文的坑,结果发现之前的文章中有强调了,在连接处加:charset="utf8" conn = pymysql.connect(host = '127.0.0.1', unix_socket = '/tmp/mysql.sock', user = 'root' , passwo......

osc_fipgtxy8
31分钟前
6
0
Above the Median

Above the Median 农夫约翰把他的N(1 <= N <= 100,000)奶牛排在一排来衡量他们的高度,牛i有:高度H_I(1 <= H_I <= 1,000, 000,000)纳米 – 因为FJ认为他需要精确测量!他想选择一些连续...

osc_cj3zzdzw
32分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部