FLEX 布局

网页布局(layout)是CSS的一个重点应用。

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

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

Flex布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的Flex写法。

以下内容主要参考了下面两篇文章:A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。

一、Flex布局是什么?

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

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


.box{display: flex; } 

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


.box{display: inline-flex; } 

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


.box{display: -webkit-flex; /* Safari */ display: flex; } 

注意,设为Flex布局以后,子元素的floatclearvertical-align属性将失效。

二、基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

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

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

三、容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。


.box {flex-direction: row | row-reverse | column | column-reverse; } 

它可能有4个值。

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

3.2 flex-wrap属性

默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。


.box{flex-wrap: nowrap | wrap | wrap-reverse; } 

它可能取三个值。

(1)nowrap(默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

3.3 flex-flow

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


.box {flex-flow: <flex-direction> || <flex-wrap>; } 

3.4 justify-content属性

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


.box {justify-content: flex-start | flex-end | center | space-between | space-around; } 

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性

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


.box {align-items: flex-start | flex-end | center | baseline | stretch; } 

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

3.6 align-content属性

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


.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 

该属性可能取6个值。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

四、项目的属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。


.item {order: <integer>; } 

4.2 flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。


.item {flex-grow: <number>; /* default 0 */ } 

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。


.item {flex-shrink: <number>; /* default 1 */ } 

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。


.item {flex-basis: <length> | auto; /* default auto */ } 

它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。

4.5 flex属性

flex属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。


.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch


.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; } 

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

转载于:https://www.cnblogs.com/hupan508/p/5189958.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/257705.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpiderMonkey-让你的C++程序支持JavaScript脚本

译序 有些网友对为什么D2JSP能执行JavaScript脚本程序感到奇怪&#xff0c;因此我翻译了这篇文章&#xff0c;原文在这里。这篇教程手把手教你怎样利用SpiderMonkey创建一个能执行JavaScript脚本的C程序&#xff0c;并让JavaScript脚本操纵你的C程序的内部数据、操作。从这篇教…

Android 虚拟机学习总结Dalvik虚拟机介绍

1、Dalvik虚拟机与Java虚拟机的最显著差别是它们分别具有不同的类文件格式以及指令集。Dalvik虚拟机使用的是dex&#xff08;Dalvik Executable&#xff09;格式的类文件&#xff0c;而Java虚拟机使用的是class格式的类文件。一个dex文件能够包括若干个类。而一个class文件仅仅…

des vue 加密解密_vue DES 加密

ECB模式import cryptoJs from crypto-js// DES加密export const encryptDes (message, key) > {var keyHex cryptoJs.enc.Utf8.parse(key)var option { mode: cryptoJs.mode.ECB, padding: cryptoJs.pad.Pkcs7 }var encrypted cryptoJs.DES.encrypt(message, keyHex, op…

使用jQuery清空表单

$(#theform)[0].reset(); reset()这个函数的作用是将表单的值重置&#xff0c;变为默认值&#xff0c; 例&#xff1a; <input type"text" value"姓名"> 这个标签的默认值就是”姓名“&#xff0c;如果使用上面的方法&#xff0c;就会重置为“姓名”…

MobX快速入门教程(重要概念讲解)

转载请注明原文地址&#xff1a;http://www.cnblogs.com/ygj0930/p/7372119.html 一&#xff1a;Mobx工作流程图 二&#xff1a;MobX涉及到的概念 1:状态state 组件中的数据。 2:被观察observable 被observable修饰的state数据将会暴露给整个app&#xff0c;各观察者组件都可以…

CentOS工作内容(七)禁用IPV6

CentOS工作内容&#xff08;七&#xff09;禁用IPV6 用到的快捷键 tab 自动补齐(有不知道的吗) ctrla 移动到当前行的开头(a ahead) ctrle 移动到当前行的开头(e end) ctrlu 删除(剪切)此处至开始所有内容 复制进来&#xff1a;按一下鼠标右键粘贴到SercureCRT 复制出去&#x…

循环结束后变回去 设置一个值_VBA掌握循环结构,包你效率提高500倍

这是系列免费教程《Excel VBA&#xff1a;办公自动化》&#xff0c;还是老规矩&#xff0c;看看我们走到哪里了。1.认识VBA&#xff1a;什么是VBA&#xff1f;2.这些掌握了&#xff0c;你才敢说自己懂VBA3.VBA变量5年踩坑吐血精华总结4.VBA中重要的强制申明&#xff0c;谁看谁明…

连接到kali linux服务器上的MySQL服务器错误

前言&#xff1a;想把数据库什么的都放在虚拟机kali Linux里&#xff0c;但无奈出了好多错误。 首先&#xff1a;可以参照上一篇文章开启kali服务器端的远程连接功能&#xff0c;上一篇文章 然后&#xff1a;使用window端的sqlyog&#xff08;MySQL图形化连接工具&#xff09;连…

dedecms后台怎么添加发布软件?织梦后台软件内容管理

使用织梦cms有很多的功能&#xff0c;其中有一个是在dedecms后台添加发布软件&#xff0c;然后在前台大家可以直接下载软件&#xff0c;在织梦cms后台怎么添加发布软件呢&#xff1f;下面是织梦软件内容管理的主要操作步骤。使用织梦cms有很多的功能&#xff0c;其中有一个是在…

301 302区别_如何正确理解301,302和canonial标签

今天我们来学习一下几个比较容易混淆的页面跳转标签&#xff0c;301&#xff0c;302&#xff0c;relcanonial。在谷歌SEO里面&#xff0c;我们比较容易常见的是第一个301&#xff0c;302和canonial出现的比较少&#xff0c;但是不代表不存在&#xff0c;我会尝试从以下价格方面…

ffmpeg文档08-表达式计算/求值

8 表达式计算/求值 在计算表达式时&#xff0c;ffmpeg通过libavutil/eval.h接口调用内部计算器进行计算。 表达式可以包含一元运算符、运算符、常数和函数 两个表达式expr1和expr2可以组合起来成为"expr1;expr2" &#xff0c;两个表达式都会被计算&#xff0c;但是新…

为什么手机游戏手柄没有流行起来?

问答社区知乎上有人提了一个问题&#xff0c;“为什么手机用游戏手柄没有流行&#xff1f;” Ta找了不少论证&#xff1a;1&#xff09;手机用户数量很大&#xff1b;2&#xff09;大量用户在手机上花费最多时间的是玩游戏&#xff1b;3&#xff09;游戏机平台&#xff08;的游…

c++排序算法ppt_C/C++学习教程:C语言排序算法—插入排序算法

前言&#xff1a;插入排序算法是所有排序方法中最简单的一种算法&#xff0c;其主要的实现思想是将数据按照一定的顺序一个一个的插入到有序的表中&#xff0c;最终得到的序列就是已经排序好的数据。直接插入排序是插入排序算法中的一种&#xff0c;采用的方法是&#xff1a;在…

python函数参数

1.位置参数 2.默认参数 指向参数为不可变对象 3.可变参数 **args 一个列表list或是元组tuple 4.关键字参数 **kw,是一个字典dict 5.命名关键字参数 *, 转载于:https://www.cnblogs.com/aliy-pan/p/5198025.html

Python 常用函数 configparser模块

使用ConfigParser模块读写ini文件 ConfigParserPython的ConfigParser Module中定义了3个类对INI文件进行操作。分别是RawConfigParser、ConfigParser、SafeConfigParser。模块所解析的ini配置文件是由多个section构成&#xff0c;每个section名用中括号‘[]’包含&#xff0c;每…

自制Unity小游戏TankHero-2D(3)开始玩起来

自制Unity小游戏TankHero-2D(3)开始玩起来 我在做这样一个坦克游戏&#xff0c;是仿照&#xff08;http://game.kid.qq.com/a/20140221/028931.htm&#xff09;这个游戏制作的。仅为学习Unity之用。图片大部分是自己画的&#xff0c;少数是从网上搜来的。您可以到我的github页…

mysql按月分列统计_实现mysql按月统计的教程

mysql有个字段是DATETIME类型&#xff0c;要实现可以按月统计&#xff0c;该怎么写sql语句&#xff1f;select month(f1) from tt group by month(f1)or select DATE_FORMAT(f1,%m) from tt group by DATE_FORMAT(f1,%m)比如数据库的为2008-01-15 12&#xff1a;10&#xff1a;…

Log4j的扩展-支持设置最大日志数量的DailyRollingFileAppender

Log4j现在已经被大家熟知了&#xff0c;所有细节都可以在网上查到&#xff0c;Log4j支持Appender&#xff0c;其中DailyRollingFileAppender是被经常用到的Appender之一。在讨论今天的主题之前&#xff0c;我们先看下另外一个Appender。 最常用的Appender——RollingFileAppend…

VirtualBox虚拟机安装CentOS 7

新建虚拟机 因为比较简单&#xff0c;所以对于VirtualBox就不做过多介绍了&#xff0c;直接下载安装即可&#xff0c;安装好之后打开Oracle VM VirtualBox管理器&#xff0c;点击新建&#xff0c;选择Red Hat&#xff08;根据windows主机选择 32/64 bit&#xff0c;通常会自动识…

mysql 指定账户已存在_安装mysql时告诉我指定的账户已存在?

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…