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-contentflex-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-itemsflex-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-contentflex-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布局模式简单概述的更多相关文章

  1. 一篇文章弄懂flex布局

     壹 ❀ 引 谈到flex布局,我不知道有多少人跟我一样,在本能的想到justify-content:center与align-items:center两条属性之后,除此之外的其它属性居然显得格外陌生 ...

  2. flex布局大全 2019

    有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...

  3. flex布局大全

    有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...

  4. 趋势:flex和grid使布局更简单

    前言:记不久前面试的时候,面试官问我平时用什么布局方式,我非常耿直的说 div+css,利用position,float等布局,这就是非常传统的布局方式,通常都要写比较多的css代码:前几天在知乎上看 ...

  5. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  6. flexbox布局模式-- 浅谈

    简介 Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性.今天主要从以下几个方面简单谈谈flex. 1 版本更迭 2 flex容器 3 flex项目 4 fle ...

  7. 写给 Android 开发的小程序布局指南,Flex 布局!

    一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需 ...

  8. Flex 布局的教程

    前言:以前也经常用flex布局,但是最近看到别人使用的时候,发觉以前自己还是不够理解这个,重新看了一遍http://www.ruanyifeng.com/blog/2015/07/flex-gramm ...

  9. 微信小程序之Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

随机推荐

  1. 分享2个网址二维码API接口

    分享2个网址二维码生成API接口,用它们只需要填写好网址就能自动生成二维码,分别来自与bshare和jiathis分享工具中,如您需要就把下面的二维码生成API接口复制到你需要地方. 说明:把url= ...

  2. Ubuntu 14.04 软件源服务器列表

    http://wiki.ubuntu.com.cn/Template:14.04source 服务器列表 可将 http://cn.archive.ubuntu.com/ubuntu/ 替换为下列任意 ...

  3. 用CSS3实现背景的固定

    今天放假了,正好最近养成了没事泡泡博客园的习惯,自己也有了博客..不得不吐槽一下博客园为什么页面这么古朴,,带的几个模版也没啥意思,反正不符合我口味,幸亏后台提供了编辑CSS的功能,于是我就搬来现有的 ...

  4. JVM知识点

    先发个链接到两位大牛的主页 http://rednaxelafx.iteye.com/               http://icyfenix.iteye.com/ 目录 1)概述 2)编译 3) ...

  5. SQL SERVER同步环境新增发布对象时不能生成(sp_MS+表名)同步存储过程

    在配置了同步的用户环境(订阅端:请求订阅) 在发布端: 1.企业管理器SSMS—复制—本地发布—发布属性—项目(选中发布对象) 2.在企业管理里—查看快照代理状态(启动) 在订阅服务器: USE [D ...

  6. android 设置布局为无标题样式

    <!-- Application theme. --> <style name="AppTheme" parent="android:Theme.Lig ...

  7. linux 网卡接收多播MAC(01:08开头)

    调用: int dev_set_allmulti(struct net_device *dev, int inc) 打上IFF_ALLMULTI标记 #define    IFF_ALLMULTI   ...

  8. OpenStack Austin 峰会观察:OpenStack as IaaS 已是过去,Solutions on OpenStack 才是未来

    虽然搞 OpenStack 前后也有几年,但是今年在美国 Austin 举办的 OpenStack Summit 我还是第一次参加.回来之后,一直还在回味,觉得要写点东西,将我在这次峰会上的观察和思考 ...

  9. SQL Server With 递归 日期 循环

    要实现的效果:查询从Date From 到 To 之间的 所有日期: 示例代码如下: DECLARE @DATE_FROM DATETIME = N'2016-05-16';--N'2015-05-1 ...

  10. Booth Multiplication Algorithm [ASM-MIPS]

    A typical implementation Booth's algorithm can be implemented by repeatedly adding (with ordinary un ...