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-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

时间: 2024-10-09 22:57:54

flex布局模式简单概述的相关文章

web前端入门到实战:CSS flex布局入门

一. why flex 都知道html正常的文档流是自上而下排列的,块级元素会像下左图一样排列.但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列.虽然可以通过dispaly:inline-block.float.position完成排版,但是需要对距离进行计算,计算起来十分麻烦. 2009年W3C提出了一种新的方案--引入了弹性布局flex方式,通过容器的轴线来排列项目,简直是移动端开发的福音(虽然grid布局更牛x,后面会总结).自己也用了挺久的,但是有些参数记忆很模糊,每次

Flex布局(伸缩盒布局)

Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型.由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式. 浏览器兼容性 作为非常现实的开发者,是否对一个新技术进行关注,首先要考虑它的浏览器兼容性如何.我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的. 可以看到,现代浏览器基本上都支持了,IE10开始也支持了(IE和Safari分别加-ms-和-we

微信小程序之Flex布局

微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不确定的大小的.Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间. flex布局 Flex布局的特点: 任意方向的伸缩,向左,向右,向下,向上 在样式层可以调换和重排顺序 主轴和侧轴方便配置 子元素的空间拉伸和填充 沿着容器对齐 微信小程序实

布局模式

一:常见的布局模式 目前常见的网页布局有:固定布局,流式布局,弹性布局,响应式布局. 二:各种布局模式的布局方法,特点 1)固定布局: 网页中所有元素的尺寸一路使用px作为单位. 这种方式是最简单基础的,相信所有人在学习前端布局时都是这样搭出自己的网页的.无论对于设计还是开发人员,或者两者之间的交接,这种方式最简单直接没有异议,也没有兼容问题.但是缺点也显而易见,所有元素的大小都是写死的,这在不同尺寸的屏幕下表现出来的效果会有不同. 普通PC网站都采用这种布局. 在移动端也可以采用这种布局模式,

Flexbox布局模式的理解

Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性.首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的.在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现. <style> .container{ width: 600px; height: 400px; border: 1px solid #000; position: relative; } .box{ width: 200px; height: 100

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

一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需要有精美的前端布局,并且同时还需要处理和前端 UI 组件的交互以及它们背后的逻辑. 最近会分享一些关于小程序的内容(不保证,想到哪里写到哪里),今天先说说接触小程序第一步:布局. 如果有前端经验的话,小程序是非常容易上手的,而对于新手,第一步当然是阅读小程序的官方文档,不过之后你马上就要面临布局的问

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

前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的强拼硬凑来达到设计需求,在各个屏幕上显示效果友好,弹性的伸缩元素,简洁易维护的代码.只可惜,这位老兄有一位致命的缺点----除了chrome外几乎所有手机上浏览器都没有兼容它!!,或者支持程度大不一样!这样开发人员头疼的问题就来了,刚刚在手机上忽略掉IE这个强盗的兼容问题,又来一个?!.flex的优

flex布局帮助你快速实现布局

flex布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去float,position之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex就能帮我快速去布局,不需要去定位. 任何一个盒子都可以指定为flex布局,但是要注意,设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效. 下面我们看看我们网站经常遇到实例:我们要让图片,文字居中并且都贴底部布局,以往的经验会,父容器设置text-align:center,但是垂直方向就很繁琐了,

转:阮一峰Flex 布局教程:实例篇

作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solved by Flexbox. 一.骰子的布局 骰子的一面,最多可以放置9个点. 下面,就来看看Flex如何实现,从1个点到9个点的布局.你可以到codepen查看Demo. 如果不加说明,本节的H