本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex布局即弹性布局,使用起来十分方便灵活。

一、开始使用

任何容器都可以指定为Flex布局。

.flexBox{display:flex;}

css代码如下:

.box{width: 600px;height: 300px;border:1px solid #888;margin-bottom: 10px;}
.flexBox{display: flex;}
.box div{width: 100px;height: 100px;border:1px solid #09c;margin: 10px 10px;text-align: center;}

dom结构如下:

<h1>display:flex</h1>
<div class="flexBox box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

效果如下:

也可以设置行内元素使用 Flex 布局。

.inlineFlex{display: inline-flex;}

css代码如下:

.box{width: 600px;height: 300px;border:1px solid #888;margin-bottom: 10px;}
.box div{width: 100px;height: 100px;border:1px solid #09c;margin: 10px 10px;text-align: center;}
.box span{background: yellow;}
.inlineFlex{display: inline-flex;}

dom结构如下:

<h1>display:inline-flex</h1>
<div class="box">
<span>span</span>
<span>span</span>
<span class="inlineFlex">
<div>inline-flex</div>
<div>inline-flex</div>
<div>inline-flex</div>
</span>
<span>span</span>
<span>span</span>
</div>

效果如下:

需要注意的是:

1.Webkit 内核的浏览器,必须加上-webkit前缀。

.flexBox{
display: flex;
display: -webkit-flex;
}

2.父元素设置flex布局后,子元素的 float , clear 以及 vertical-align 属性将失效。

二、容器的属性

Flex容器有以下6个属性:

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

flex-direction属性控制项目横向排列方向

1、 flex-direction:row;为从左到右排列,也是 flex-direction的默认值;

效果如下:

2、 flex-direction:row-reverse 为从右到左;

效果如下:

3、 flex-direction:column 为从上到下;

效果如下:

4、 flex-direction:column-reverse 为从下到上;

效果如下:

在上面的例子中可以看到,当父元素宽度或者高度不够的时候,每一个项目会相应的收缩自己的宽/高来适应容器大小直到内容宽高,尽管已经设置了宽/高。如果收缩到最小宽/高仍然无法被父元素包裹,则会在当前项目排列顺序的终点方向超出容器。

flex-wrap属性控制项目是否换行及如何换行

1、 flex-wrap: nowrap; 也是 flex-wrap 的默认值;

上述例子中父元素X轴方向上是有空间的,但是因为 flex-wrap 属性默认不换行,所以子元素超出容器。

2、 flex-wrap:wrap; 如果一条轴线排不下,进行换行,如果项目横向排列,第一行在上方 ,如果项目纵向排列,第一行在左侧。

上述例子当元素设置为 flex-direction:column-reverse; flex-wrap:wrap; 时,效果如下:

为了更好的测试 flex-wrap 属性,我们对父元素宽高做一下调整,并且再添加3个项目,调整后效果如下:

3、 flex-wrap:wrap-reverse; 如果一条轴线排不下,进行换行,如果项目横向排列,第一行在下方 ,如果项目纵向排列,第一行在右侧。

上述例子当元素设置为 flex-direction:column-reverse; flex-wrap:wrap-reverse; 时,效果如下:

flex-flow属性

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap 。

justify-content属性定义了项目在轴线上的对齐方式

为了方便测试,我们将样式和dom结构简化一下

css代码如下:

.box{width: 500px;height: 120px;border:1px solid #888;margin-bottom: 10px;}
.flexBox{
display: flex;
display: -webkit-flex;
}
.box div{width: 100px;height: 100px;border:1px solid #09c;margin: 10px 10px;text-align: center;}

dom结构如下:

<div class="flexBox box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

1、 justify-content: flex-start; 项目以  flex-direction  设置的方向的起始位置排列,也是  justify-content 属性的默认值。效果如下:

2、 justify-content: flex-end; 项目以 flex-direction 设置的方向的结束位置排列。效果如下:

3、 justify-content: center; 居中对齐。效果如下:

4、 justify-content: space-between; 两端对齐,项目之间间隔相等。效果如下:

5、 justify-content:space-around; 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。效果如下:

align-items属性定义项目在交叉轴上如何对齐

1、 align-items: flex-start; 交叉轴的起点对齐,也是 align-items 属性的默认值。效果如下:

2、 align-items: flex-end; 交叉轴的终点对齐。效果如下:

3、 align-items: center; 与交叉轴的中点对齐,也就是居中对齐。效果如下:

4、 align-items: stretch; 如果项目设置了高度,设置此属性值没有变化,如果项目未设置高度或设为auto,将占满整个容器的高度。效果如下:

5、 align-items: baseline; 项目的第一行文字的基线对齐。效果如下:

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

1、 align-content: stretch; 轴线占满整个交叉轴。也是 align-content 属性的默认值。效果如下:

2、 align-content: flex-start; 与交叉轴的起点对齐。效果如下:

3、 align-content: flex-end; 与交叉轴的终点对齐。效果如下:

4、 align-content: center; 与交叉轴的中点对齐。效果如下:

5、 align-content: space-between; 与交叉轴两端对齐,轴线之间的间隔平均分布。效果如下:

6、 align-content: space-around; 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。效果如下:

如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。

Flex布局-容器的属性的更多相关文章

  1. Flex布局教程及属性速查

    一.Flex布局介绍 伸缩盒模型(flexbox)是一个新的盒子模型,意为"弹性布局",用来为盒状模型提供最大的灵活性,主要优化了UI布局.Flexbox的功能主要包手:简单使用一 ...

  2. flex布局以及相关属性

    容器的属性: 父元素设置display:flex:子元素即可使用flex布局. flex-direction 决定项目排列方向: .box { flex-direction: row | row-re ...

  3. Flex 布局的各属性取值解释

    Flex布局是一种弹性布局.布局样式比较灵活,大多数情况下可以替代float,而且不会脱离文档里流. Flex中定义了两个轴线,一个主轴一个副轴,这个概念你可以想想屏幕坐标系(X轴向右,Y轴向下),F ...

  4. flex布局以及常用属性。

    (1)flex布局排列 会消除块状属性,所有与块状相关的属性将失效,比如块状元素会独占一行,如图2,设置flex后会在一行排列

  5. flex布局解说和属性

    1. flex-direction 规定当前DIV下面的子元素是横向布局还是纵向布局 row 默认值,横向布局相当于float:left column 纵向,相当于DIV默认的垂直方向 2.justi ...

  6. Flex布局-项目的属性

    Flex项目有以下6个属性: order flex-grow flex-shrink flex-basis flex align-self order属性定义项目的排列顺序.数值越小,排列越靠前,默认 ...

  7. CSS3弹性伸缩布局(二)——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  8. flex布局全解析

    前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...

  9. 2017年总结的前端文章——一劳永逸的搞定 flex 布局

    flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...

随机推荐

  1. 批量操作RunTime之获取的Dic换成Model

    方法一: // // AlinkDeviceInfo.m //// // Created by Vivien on 2018/10/12. // Copyright © 2018年 . All rig ...

  2. git如何撤销git add操作?

    答: 使用git reset <file name>即可撤销

  3. Monent.js:强大的日期处理类库

    一.介绍及安装 1.1 介绍 Moment.js是一个优秀的JavaScript 日期处理类库. 如果没有Moment.js之类的日期处理库,我们如果需要获得格式化后的日期.往往需要通过new Dat ...

  4. EXCEL中把两列表格里的数字合成一列并且中间用逗号隔开

    背景:使用loadrunner做参数化时,往往需要在excel表格中做数据,比如:第一列是用户名,第二列是密码,格式如下: 再将用户名和密码合并成一列,以逗号分隔,需要用到的公式为: =A1& ...

  5. (14)线程- Event事件和守护线程Daemon

    <一>Event事件 线程Event基本和进程的Event语法是一样的 # wait() 动态给程序加阻塞 # set() 将内部属性改成True # clear() 将内部属性改成Fal ...

  6. 【转】 VGA时序及其原理

    显示器扫描方式分为逐行扫描和隔行扫描:逐行扫描是扫描从屏幕左上角一点开始,从左向右逐点扫描,每扫描完一行,电子束回到屏幕的左边下一行的起始位置,在这期间,CRT对电子束进行消隐,每行结束时,用行同步信 ...

  7. ionic3 双向数据绑定失效 脏值检测失效

    最近在使用ionic3过程中,使用了eval()方法进行字符串拼接成一个function使用 在eval()方法中,只能使用局部变量,全局变量无法使用,ionic3的this在eval中失效(unde ...

  8. windows server2008 IIS搭建网站简易教程(阿里云)

    最近搞了个阿里云服务器 想着需要用这个服务器学点东西,故而想着把自己之前写的网站能部署上去,虽然自己是做前端移动开发,但是对这个服务器的东西也很感兴趣 第一步 配置阿里云入口规则 如图开放81 80 ...

  9. GoEasy的使用

    GoEasy介绍 http请求短连接,一次请求响应后关闭,而GoEasy建立了客户端与服务器之间的长连接. goeasy支持服务器到客户端的消息发布,客户端到客户端的消息发布 GoEasy用来做什么 ...

  10. css3实现自适应的3行,左右行固定宽度,中间自适应,要求先渲染中间部分

    https://blog.csdn.net/thqy39/article/details/73512478 https://www.cnblogs.com/ranzige/p/4097453.html ...