Flex基本概念:

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

flex容器中的每个单元块被称作flex item,其实flex布局的属性虽然分为父级容器的属性和子级容器的属性,但是其实所有的效果都是作用在子级容器上的,只不过父级容器的属性作用的是子集容器整体或者说是所有的子级容器。

如何创建flex布局?

给div这种块状元素元素设置display:flex或者给span这种内联元素设置display:inline-flex,flex布局就创建完成了

属性介绍以及示例:

作用在父元素上的属性。

  1.flex-direction  控制flex子项整体的布局方向。

  row : 子项按照布局顺序从浏览器的左侧开始横向排列

  

  row-reverse :子项按照布局顺序从浏览器的右侧开始横向排列

  

  column :子项按照布局顺序从浏览器的顶端开始竖向排列

  

  column-reverse:子项按照布局倒序从浏览器的顶端开始竖向排列

  

  2.flex-wrap  控制子项整体是单行显示还是换行显示,如果换行上下左右的方向是否反方向显示

  nowrap:不换行,宽度不够时子项进行缩小

  

  wrap:换行显示

  

  wrap-reverse:反方向换行显示

  

  3.flex-flow 上面两个属性的缩写形式

  flex-flow: <‘flex-direction’> || <‘flex-wrap’>

  默认值:row nowrap

  4.justify-content  控制子项整体在水平方向上的对齐方式和分布方式

  flex-start:与主轴的开始位置对齐

     

  

  flex-end:与主轴的结束位置对齐

  

  

  center:在主轴的中间位置

  

  

  space-between:在水平方向上两端对齐

  

  space-around:环绕对齐,子项左右两边的空余距离相等。

  

  

  space-evenly:均分对齐,子项和子项之间包括子项和两端的距离相等

  

  5.align-items  控制子项们在垂直方向上的对齐方式

  stretch:

  

  

 flex-start:主轴的开始位置对齐

 

 flex-end:主轴的结束位置对齐

 

 

 center:中间对齐

 

 baseline:子项内容的基线对齐。

 

 6.align-content  控制子项整体在垂直方向上的对齐方式和分布方式

 flex-start:在主轴的开始位置对齐

 

  

 flex-end:主轴的结束位置对齐

 center:主轴中心对齐

 

 space-between:两端对齐

 

 

 space-around:环绕对齐(同上)

 

 

 space-evenly:等距对齐

 

 作用在子元素上的属性

 任何子项都没有设置多余的属性时,子项按照内容顺序从左到右一次排序

 

 1.order  定义子项的排序位置 属性值为整数类型 默认值为0 数值越小越靠前 如果想让某一个子项在最前面 可以给他设置一个比0小的数值例如-1

 

 2.flex-grow  放大 属性值不支持负值 默认为0。将剩余空间平均分配,设置的属性值为总份数中的几份

 下图中,我给第一个子项设置flex-grow为4,第四个子项设置flex-grow为2,所以剩余空间会被平均分成6份,1占4份,4占2份

 

 3.flex-shrink  缩小 (flex空间不足时) 属性值不支持负值 默认值为1(即所有的子项都会收缩,设置为0则表示不收缩,保持原始的宽度)

 下面的例子:所有盒子的初始宽度都是400,我只给序号为4的盒子设置了flex-shrink: 0 属性;所以即使整体布局的宽度变小时,序号4的盒子宽度也会依然保持400,而其他没有设置该属性的因为没有再设置新的属性值(所以默认为1),都发生了缩小

 

 4.flex-basis  最小宽度 (在分配剩余空间之前的大小) 默认值 auto 有宽度值就是宽度值,没有就按内容来

 当设置了flex-basis值之后,width的属性值不再起作用,即使设置了@important或者是行内样式也依然没有作用

 例子:

html代码:
<div class="flexFather flexFather1">
<div class="child child1" style="background-color: aquamarine">1</div>
<div class="child child2" style="background-color: palevioletred">2</div>
<div class="child child3" style="width:200px;background-color: peachpuff">3</div>
</div>
css代码:
.flexFather{
display: flex;
flex-direction: row;
height:600px;
}
.flexFather .child{
flex-basis:400px;
height:100px;
width: 100px !important;
font:bold 20px/100px "Micsoroft";
text-align: center;
}

  

 效果图:

    

  5.flex  前面三个属性的缩写

  flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

  默认值:0 1 auto

 --------------------------------------------------------end------------------------------------------------------------

												

浅析flex 布局的更多相关文章

  1. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  2. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  3. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

随机推荐

  1. python列表与字符串、元组的区别以及列表引用的方式

    一.字符串 字符串也可以用下标取值.切片.for循环.len()取长度以及 in 和 not in 来进行操作. 但字符串是不可变的,不能被更改.只能构造一个“新的”字符串来存取你想要修改后的数据. ...

  2. mysql 常见问题整理

    一 coalesce 在mysql中,其实有不少方法和函数是很有用的,这次介绍一个叫coalesce的,拼写十分麻烦,但其实作用是将返回传入的参数中第一个非null的值,比如 SELECT COALE ...

  3. length 和 size 区分

    ​ 总是混淆length和size,今天专门区分一下 1.在java代码(.java)中 1.length属性是针对Java中的数组来说的,要求数组的长度可以用其length属性: 2.length( ...

  4. 【Redis】Redis持久化

    Redis数据持久化 Redis的特性: 易扩展,大数据高性能,多样灵活的数据模型,受限内存 Redis默认端口: 6379 Redis数据持久化分为有两种: RDB: 每隔一段时间就把内存数据写入磁 ...

  5. 数据库连接池的sqlhelper

    import pymysql import threading from DBUtils.PooledDB import PooledDB """ storage = { ...

  6. django进阶版2

    目录 批量插入数据 自定义分页器 创建多表关系的3种方法 全自动 全手动 半自动 form组件 如何渲染页面 第一种方式 第二种方式 第三种方式 如何显示错误信息 forms组件钩子函数 局部钩子 全 ...

  7. MySQL各大存储引擎

    MySQL各大存储引擎: 最好先看下你下的MySQL支持什么数据库引擎 存储引擎主要有: 1. MyIsam , 2. InnoDB, 3. Memory, 4. Blackhole, 5. CSV, ...

  8. Linux的一个后门引发对PAM的探究

    转自http://www.91ri.org/16803.html 1.1   起因 今天在搜索关于Linux下的后门姿势时,发现一条命令如下:软链接后门: 1 ln -sf /usr/sbin/ssh ...

  9. ubuntu下npm全局安装包报错的解决方案

    大概就是 npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ERR ...

  10. flume收集日志直接sink到oracle数据库

    因为项目需求,需要保存项目日志.项目的并发量不大,所以这里直接通过flume保存到oracle 源码地址:https://github.com/jaxlove/fks/tree/master/src/ ...