flex布局模式简单概述
CSS3中新增一种弹性布局模型:flexbox。网上关于flex的介绍很多,这里介绍下常用的几个属性。弹性布局的特点是非常灵活。可根据剩余的宽高,灵活布局。
先用图片说明flex具有哪些属性。(网上盗的图)
上图中flex容器即是父元素,flex项目为子元素。
属性说明
1.首先在父元素中定义display:flex;
2.flex-direction:属性用来控制伸缩容器中主轴的方向,同时也决定了伸缩项目子元素的方向。
flex-direction:row | row-reverse | column | column-reverse
- row 横向从左到右排列(左对齐)
- row-reverse 横向从右到左排列(右对齐)
- column 纵向从上到下排列(顶对齐)
- column-reverse 纵向从下到上排列(底对齐)
效果如下:
3. justify-content: 设置子元素在横轴上的对齐方式。
justify-content:flex-start | flex-end | center | space-between | space-around
- flex-start 弹性盒子元素将向行起始位置对齐。
- flex-end 弹性盒子子元素向行结束位置对齐。
- center 弹性盒子子元素水平居中对齐。
- space-between 弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于'flex-start'。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。
- space-around 弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于'center'。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
效果如下:
4. align-items:定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
align-items:flex-start | flex-end | center | baseline | stretch
- flex-start 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的纵轴起始边界。
- flex-end 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
- center 弹性盒子子元素垂直对齐。
- baseline 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
- stretch 如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
效果如下:
5. align-content:当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。
align-content:flex-start | flex-end | center | space-between | space-around | stretch
效果同justify-content属性。
6.flex-wrap:该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
flex-wrap:nowrap | wrap | wrap-reverse
- nowrap 强制不换行
- wrap 正常排列,换行
- wrap-reverse 正常反向排列,换行
参考:
http://web.jobbole.com/86488/
https://bocoup.com/weblog/dive-into-flexbox
http://www.css88.com/book/css/properties/flex/flex-wrap.htm
flex布局模式简单概述的更多相关文章
- 一篇文章弄懂flex布局
壹 ❀ 引 谈到flex布局,我不知道有多少人跟我一样,在本能的想到justify-content:center与align-items:center两条属性之后,除此之外的其它属性居然显得格外陌生 ...
- flex布局大全 2019
有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...
- flex布局大全
有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...
- 趋势:flex和grid使布局更简单
前言:记不久前面试的时候,面试官问我平时用什么布局方式,我非常耿直的说 div+css,利用position,float等布局,这就是非常传统的布局方式,通常都要写比较多的css代码:前几天在知乎上看 ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- flexbox布局模式-- 浅谈
简介 Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性.今天主要从以下几个方面简单谈谈flex. 1 版本更迭 2 flex容器 3 flex项目 4 fle ...
- 写给 Android 开发的小程序布局指南,Flex 布局!
一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需 ...
- Flex 布局的教程
前言:以前也经常用flex布局,但是最近看到别人使用的时候,发觉以前自己还是不够理解这个,重新看了一遍http://www.ruanyifeng.com/blog/2015/07/flex-gramm ...
- 微信小程序之Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
随机推荐
- IIS和tomcat共用80端口
IIS和tomcat共用80端口 很多机器都需要同时使用tomcat和iis两个服务器以部署不同的网站,而解决共用80端口的问题也经常遇到,今天实际操作了一回,以下是具体步骤: 实现tomcat和ii ...
- SVN安装使用小结
SVN在实际的项目开发中有很广泛的用途.一开始接触SVN(Subversion),思路并不清楚,现在总算理清了. 声明:本文并不是系统地对SVN做介绍,而是笔者的使用总结,个人认为的一些要点,可能对初 ...
- Linux 学习001
遇到的问题一: xxx is not in the sudoers file.This incident will be reported.的解决方法 1.切换到root用户下,怎么切换就不用说了吧, ...
- oracle学习笔记系列------oracle 基本操作之基本函数的用法
--创建一个accout账户表 CREATE TABLE account( id ) NOT NULL, recommender_id ), login_name ) NOT NULL, login_ ...
- Redis安装和配置
1.下载安装redis 在linux服务器上,命令行执行以下命令(cd ./usr local/src 一般源码放在这里(推荐源码安装)) wget http://download.redis.io/ ...
- 烂泥:使用nginx利用虚拟主机搭建WordPress博客
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 最近开始打算学习nginx web服务器,既然是学习还是以实用为目的的.我们在此以搭建WordPress博客为例. 搭建WordPress博客,我们需要 ...
- 如何在centos上安装epel源
一.EPEL是什么? EPEL (Extra Packages for Enterprise Linux,企业版Linux的额外软件包) 是Fedora小组维护的一个软件仓库项目,为RHEL/Cent ...
- ES6函数剩余参数(Rest Parameters)
我们知道JS函数内部有个arguments对象,可以拿到全部实参.现在ES6给我们带来了一个新的对象,可以拿到除开始参数外的参数,即剩余参数(废话好多 O(∩_∩)O~). 这个新的对象和argume ...
- nodemanager execute container fail many times
ttempt_1448915696877_13139_m_000141_0 100.00 FAILED map > map px42pub:8042 logs Wed, 09 Dec 2015 ...
- 【redis使用全解析】常见运维操作
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ 1.1 启动 1.1.1 启动redis $ redis-server redis.conf 常见选项: ./r ...