文档章节

前端布局之Flex语法

飞鱼湾
 飞鱼湾
发布于 2017/07/20 10:03
字数 1458
阅读 18
收藏 0

前端布局一直是CSS的一个重点应用,然而基于盒子模型的传统布局方案,依赖display + position + float 属性,对于某些特殊的布局非常不方便,比如:垂直居中就不容易实现。针对这一情况,在2009年,W3C提出了一种新的方案:Flex布局,可以简便、完整、响应式地实现前端的各种布局,并且已经得到几乎所有浏览器的支持。

众所周知,前端分为PC端和移动端,并且它们的界面布局有一些差别,比如:PC端的界面中,水平方向是主轴(main axis),竖直方向是交叉轴(cross axis);而移动端,水平方向是交叉轴(cross axis),竖直方向是主轴(main axis),针对这一差别,在前端布局中要特别注意。

flex属性简介

flex的属性分为两类:父容器属性和子item的属性

父容器属性

属性 作用 特性分类
flex-direction 定义子项在容器内的排列方向 排列
flex-wrap 定义子项在容器内的换行效果 排列
flex-flow flex-direction和flex-wrap的复合属性 排列
justify-content 定义子项在容器内水平对齐方式 对齐
align-items 定义子项在容器内垂直对齐方式 对齐
align-content 定义多行子项在容器内整体垂直对齐方式 对齐

子item属性

属性 作用 特性分类
order 定义子项们的排列顺序 排列
flex-grow 定义子项宽度之和不足父元素宽度时,子项拉伸的比例 占地面积
flex-shrink 定义子项宽度之和超过父元素宽度时,子项缩放的比例 占地面积
flex-basis 定义子项的初始宽度,flex-grow和flex-shrink以此为基础缩放 占地面积
align-self 定义单个子项与其他项目不一样的对齐方式 对齐

Flex布局

FlexFlexible Box的缩写,意思是弹性布局,用来为盒子模型提供最大的灵活性。分为两种布局方式:flexinline-flex

1. flex: 将对象作为弹性伸缩盒显示

flex默认从左边开始布局,所以指定宽度后,子item就开始从左至右依次布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    .main{
      width:200px;
      background-color: red;
      display: flex;/*父div设置该属性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*这是css3属性,如果不懂,请继续往下阅读*/
      /*float:left;这个属性就不需要了,会自动浮动*/
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>
</html>

效果图

图1

2. inline-flex:将对象作为内联块级弹性伸缩盒显示

inline-flex将对象作为内联级容器,它会根据子item的大小自适应宽度和高度,所以可以删除width: 200px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    .main{
      background-color: red;
      display: inline-flex;/*父div设置该属性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*这是css3属性,如果不懂,请继续往下阅读*/
      /*float:left;这个属性就不需要了,会自动浮动*/
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>
</html>

效果图

图2

flex父容器属性

1. flex direction

控制主轴的方向,即子item的排列方向,有四个取值范围:

  • row(default)- 主轴水平
  • row-reverse
  • column - 主轴垂直
  • column-reverse

图3

2. flex wrap

定义子item在主轴方向的换行效果

图5

3. flex-flow

该属性是flex-directionflex-wrap两个属性的缩写,默认值为:row nowrap

4. justify content

定义子item在主轴方向的对齐方式

图4

5. align-items

定义子item在交叉轴方向的对齐方式

图6

6. align-content

定义多行子item在交叉轴上的对齐方式

图7

子item属性

1. order

定义子item的排列顺序,默认为0

图8

2. flex-grow

定义子item的宽度小于父容器时,子item的拉伸比例,默认为0,表示不拉伸

图9

3. flex-shrink

定义子item的宽度之和超过父容器时,子item的缩放的比例,默认为1

图10

4. flex-basis

设置子item的宽度flex-direction = row)或高度flex-direction = column)。如果设置该属性,那么flex-grow/flex-shrink以该属性大小进行缩放

5. flex

该属性是:flex-grow flex-shrink flex-basis的简写,默认值为:0 1 auto,其中后两个属性可选

6. align-self

定义单个子item在交叉轴上的对齐方式,会覆盖默认的对齐方式。默认值为auto,表示继承父容器的align-items属性,如果没有父容器,则等同于stretchstretch: 伸缩项目在交叉轴方向占满伸缩容器, 前提是不设置交叉轴方向的尺寸)

图11

定位

display属性定义子item如何在父容器内布局,有两中类型:relativeabsolute

1. display: relative

在相对定位中,布局子item时需要用到marginborderpadding等盒子模型。其中,borderpadding会显示在item的背景色中;而margin则不会,默认是透明色

图12

2. display: absolute

使用绝对定位的item,如果其父容器设置了relative布局,则以父容器做参考,如果父容器不设置relative布局,则以window做参考。其中,设置布局的属性为:left、right、top、bottom、start、end

Position = Absolute; Start = 0; Top = 0; Width = 50; Height = 50;

视图:

图13

Position = Absolute; Start = 10; Top = 10; End = 10; Bottom = 10;

视图:

图14


至此,Flexbox的语法介绍完毕,虽然有点多,但是还要多练,熟能生巧,熟练后你会发现,前端flex布局快速、高效和灵活。

(部分图片来源互联网,如有侵权,请告知,我怕赔不起)

参考文章

https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context

https://facebook.github.io/yoga/docs/absolute-position/

http://www.cnblogs.com/shuiyi/p/5716918.html

http://www.w3school.com.cn/css/css_boxmodel.asp

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

https://my.oschina.net/sheila/blog/384806

© 著作权归作者所有

飞鱼湾
粉丝 2
博文 44
码字总数 76899
作品 0
浦东
程序员
私信 提问
前端入门5-CSS弹性布局flex

声明 本系列文章内容全部梳理自以下四个来源: 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在...

请叫我大苏
2018/10/31
0
0
从零开始学 Web 之 CSS3(七)多列布局,伸缩布局

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/06
0
0
使用 Flex 布局与其他普通布局的简单对比

最近使用 flex 布局来做各种居中真的带来了不少方便,现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果。 一、左右 1:1 布局 布局: 利用 float 属性 在使用 flex 之前,实...

Gwokhov
2018/12/08
0
0
Flex弹性布局在移动设备上的应用

本文内容为整理摘录。 引文 首先,我们有表格布局。当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局。 然后是现在大多数人都在使用的浮动布局。我们可以...

yinyongcom666
2013/08/07
8.7K
4
[知其所以然]探究Flex盒子的‘’弹性‘’

背景 我们使用Flexbox 实现垂直水平居中、自适应容器宽度乐此不疲,因为确确实实很方便。可以简便、完整、响应式地实现各种页面布局,目前已得到所有现代浏览器的支持。但Flex属性如何计算呢...

快狗打车前端团队
05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7命令行和图形界面的相互切换

最近安装了centos7,发现在命令行和图形界面的相互切换命令上,与centos以往版本有很大不同。 1,centos7默认安装后,跟其他版本一样,启动默认进入图形界面; 2,在图形化桌面,右击鼠标,选...

无名氏的程序员
29分钟前
6
0
对称的二叉树

请实现一个函数,用来判断一颗二叉树是不是对称的。注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的。 boolean isSymmetrical(TreeNode pRoot) { if (pRoot == null) ...

Garphy
39分钟前
4
0
快速失败 (fail-fast) 和安全失败 (fail-safe) 的区别是什么

一:快速失败(fail—fast) 在用迭代器遍历一个集合对象时,如果遍历过程中对集合对象的内容进行了修改(增加、删除、修改),则会抛出Concurrent Modification Exception。 原理:迭代器在...

Bb进阶
41分钟前
7
0
golang 数据库与JSON解析一起 用空格分割

type Stocks struct { Id string `xorm:"varchar(64) pk" json:"id"` Name string `xorm:"varchar(64)" json:"name"` StockNum str......

zdglf
45分钟前
6
0
恨天诀——第一集 第五章

天似穹庐,笼盖四野。 静静矗立的天柱峰,像一把长剑,直插云霄。山南显得格外阴冷,萧瑟。 “龙儿,何为天道?”一长一少两人默默并排而立,长者问道。 良久,少年回答:“父亲,恕孩儿驽钝...

Kerwin_zZ
51分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部