做为css布局的又一种新方式,Flex拥有极强的使用效果,相比原来的float,position对元素样式的操作更加简洁,本文是我的一点学习经验和心得吧,如有错误以及不足之处,请多多指点。

好进入正题吧,首先借用阮一峰大神的一副图片:

再来说说flex的几个属性吧:

一、容器属性

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

  这个属性是定义元素在主轴上的排列顺序的,也就是上面的(main axis)

  row:元素在主轴上以水平的方向排列的,起点在左端(同时,这个也是默认值)

  row-reverse:元素在主轴上以水平的方向排列的,起点在右端

  column:元素在主轴上以垂直的方向排列的,起点在上方

  column-reverse:元素在主轴上以垂直的方向排列的,起点在下方

光说不练假把式,贴上代码:

   

效果如下:

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

  这个属性是定义如果元素在一根轴线上排列不下后该如何排列:

  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

  这个属性是定义元素在主轴上的对齐方式

  flex-start主轴的起点对齐(默认)

  flex-end主轴的终点对齐

  center:主轴的中点对齐

  space-between:俩端对齐,元素之间的间隔相等

  space-around:元素的俩侧间隔相等,以元素及俩端为对齐方式

代码贴上:

   

效果如下:

5.align-items:flex-start | flex-end | center | baseline | stretch

  这个属性是相对justify-content来说的,他是规定元素在交叉轴上的对齐方式的

  flex-start:交叉轴的起点对齐

  flex-end:交叉轴的终点对齐

  center:交叉轴的中点对齐

  baseline:项目的第一行文字对齐

  stretch:如果元素的高度没有设置或者设置为auto,则元素将占满容器的高度

贴上代码:

   

效果如下:

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

  这个属性是规定有多根轴线时的对齐方式,如果只有一根轴线,不起作用

  flex-start:与交叉轴的起点对齐

  flex-end:与交叉轴的终点对齐

  center:与交叉点的终点对齐

  space-between:与交叉轴的俩端对齐,轴线之间的距离相等

  space-around:每根轴线的俩侧距离相等

  stretch:轴线占满整个交叉轴

二、元素属性

1.order:<integer>

  这个属性定义元素的排列顺序,数值越小,排列越靠前,默认是0

贴上代码:

结果如下:

2.flex-grow<number>

  该属性定义元素放大比例,默认为0,0表示的是即使有剩余空间也不放大

  如果所有的元素的这个值都为1,那么这些元素将等分剩余空间,如果其中有一个大于1的元素,那么这个元素占有的剩余空间比别的大N倍

贴上代码:

效果如下:

3.flex-shrink:<number>

  这个属性是定义元素的缩小比例,默认值为1,如果剩余空间不足,则元素缩小

  如果所有元素的这个属性都为1时,当空间不足时,将等比例缩小。如果一个元素的这个属性为0,其余都为1,那么空间不足时,属性为0的元素不缩小

贴上代码:

效果如下:

注意:负值对该属性没有作用

4.flex-basis:<length> | auto

  这个属性定义在分配多余空间前,元素占主轴的大小,以此来计算主轴上是否还有多余空间,默认值为auto,也就是元素原本大小

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

  这个属性是flex-growflex-shrink 和 flex-basis的简写,默认值为(0 1 auto)

   该属性有俩个快捷值:auto和none

贴上代码

效果如下:

对于这三个属性,我是这样理解的:flex-grow相当于一大堆地主,准备瓜分主轴的“土地”,但地主里面也有相对厉害的,比如属性值更高的,他就瓜分的土地多,

flex-shrink相当于一群很好的朋友,互帮互助,主轴的“土地”不够的话,大家一起减少“土地”,但是里面却出现了一个恶霸,也就是属性值为0的,他不管这么多

在他看来,爱咋咋滴,没我事情。最后flex-basis相当于算账的,计算主轴剩余的“土地”还剩下多少,计算后,再让那俩个属性自己去分剩余的“土地”。

当然,flex也有缺点,就是他对于手机浏览器的兼容还没做到位,有些手机浏览器还不能辨识。

  

Flex布局的学习经验的更多相关文章

  1. Flex 布局教程学习

    转载自:阮一峰的网络日志(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) 网页布局(layout)是 CSS 的一个重点应用. 布局 ...

  2. 浅谈flex布局中小技巧

    最近有个面试,面试官问到,在一个横向布局上,假设有三个div,每个宽度为定宽apx,如果想使两侧宽度为x,中间div间间隔为2x.x可以自适应.如下图: 怎么做很简单,两行代码就搞定:   justi ...

  3. 小白入门篇:flex布局

    --前言 因为这个星期写一个小的项目用到flex布局和grid布局,虽然这两种布局都是兼容性都有问题,但是别急,我觉的以后肯定是会发展并且流行起来的,毕竟google大法好,而且这两个布局真的比一般的 ...

  4. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  5. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

  6. Flex布局【弹性布局】学习

    先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...

  7. 学习关于display :flex 布局问题!

    很多人不明白这个display:flex是到底是什么东西,如何使用的  . 1.什么是display:flex呢? 答:flex是 flexible  box的缩写,意为弹性布局 :这个东西的引入,为 ...

  8. CSS3 Flex布局(伸缩布局盒模型)学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  9. flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...

随机推荐

  1. postgresql-定时备份,压缩备份

    crontab -e 在最后添加: # backup database at 22:00 every day 0 22 * * * thunisoft /home/eric/bin/backup-db ...

  2. python安装mysqlclient模块报fatal error: Python.h:解决方法

    在搭建Flask框架安装mysqlclient模块时候老是报fatal error: Python.h:错误,折腾老半天,百度了老半天看了不少大神帖子,就是没解决, 后来发现这不是个BUG,都是自己的 ...

  3. npm包发布记录

    下雪了,在家闲着,不如写一个npm 包发布.简单的 npm 包的发布网上有很多教程,我就不记录了.这里记录下,一个复杂的 npm 包发布,复杂指的构建环境复杂. 整个工程使用 rollup 来构建,其 ...

  4. odoo开发笔记 -- 官方模块一览表

    模块名称 技术名称 作者 电子发票管理 account OpenERP SA 会计与财务 account_accountant OpenERP SA 合同管理 account_analytic_ana ...

  5. 多线程的实现及常用方法_DAY23

    1:多线程(理解) (1)如果一个应用程序有多条执行路径,则被称为多线程程序. 进程:正在执行的程序. 线程:程序的执行路径,执行单元. 单线程:如果一个应用程序只有一条执行路径,则被称为单线程程序. ...

  6. Git使用(1)

    安装git完成后 1.首先配置你的用户信息,用于体现在你的提交记录中包含your name and your email git config --global user.name "you ...

  7. WPF 中textBox实现只输入数字

    刚学到 通过本方法可以使文本框只能输入或复制入数字  对于数量类输入文本框比较有用 金额类只需小改动也可实现 以TextBox txtCount为例 添加TextChanged事件 代码如下 priv ...

  8. windows平台安装php_memcache模块

    要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位);php-5.3; memcached-1.2.6 下载地址 环境下载 什么是PHP Memcache模块 Memcach ...

  9. 如何让你的网站用上免费的HTTPS

    因为之前网站上被注入了广告,再百般尝试之后最后还是使用了HTTPS解决了. 在实现HTTPS的时候最关键的就是证书. 证书的质量觉得了你被多少浏览器所信任. 证书的价格也就蹭蹭蹭往上涨了. 这里推荐一 ...

  10. Vue + Element UI 实现权限管理系统 前端篇(九):接口格式定义

    接口请求格式定义 前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟. 接口定义遵循几个规范: 1. 接口按功能模块划分. 系统登录:登录相关接口 用户管理: ...