文档章节

Flex布局

一诺_
 一诺_
发布于 2016/11/15 12:07
字数 783
阅读 18
收藏 2

Flex布局

容器属性

  1. 父元素首先设置 display:flex

  2. flex-direction: row(默认) | row-reverse | colum | colum-reverse

    该属性指定了Flex的项目怎样在flex容器中排列,设置flex容器的主轴方向,它们(项目)两个主要的方向排列,就像一行一样水平排列或者像一列一样垂直排列。

  3. flex-wrap: nowrap(默认值) | wrap | wrap-reverse

    初始情况下,Flexbox的理念是所有的项目都排列在一条线上(轴线),flex-wrap 属性控制容器是否将它的项目排列在一行或者多行,并且控制新行堆叠的方向。

  4. flex-flow: row nowrap

    该属性是上面两个属性的简写方式,前一个参数设置flex-direction,后一个参数设置flex-wrap

  5. justify-content: flex-start(默认值) | flex-end | center | space-between | space-around

    定义了项目在容器主轴上的对齐方式,当的容器中项目都是一行并且非弹性的时候或者项目是弹性的但是达到了它们的最小宽度的时候该属性可以定义容器中的剩余空间的分配。

  6. align-items: stretch(默认值) | flex-start | flex-end | center | baseline

    定义项目在交叉轴上的对齐方式,交叉轴与当前的轴线有关系,与justify-content很相似,只不过是垂直方向的;这属性为所有的项目设置默认的交叉轴上的对齐方式,包括匿名的。

  7. align-content: stretch(默认值) | flex-start | flex-end | center | space-between | space-around

    当交叉轴上还有多余的空间时它定了多行的对齐方式,类似justify-content在主轴上对齐所有项目的方式一样。

子元素属性

  1. order: number

    该属性可以很简单的控制项目的顺序,而不用在HTML代码里面做调整。这个整形值可以为负数,默认值是 0。

  2. flex-grow: number || 0

    该属性指定项目的生长因素,它确定了当容器有剩余空间分配的时候相对于其他的项目当前的项目能够增加多少宽度。

  3. flex-shrink: number || 1

    该属性指定了项目的收缩因素,它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。

  4. flex-basis: 100px || auto (不懂 )

    该属性的值和width和height的取值一样,在 flex factors分配剩余空间之前指定项目的初始的大小

  5. flex:

    该属性是flex-grow, flex-shrink 和flex-basis的缩写形式,同时属性值也有简写:auto表示(1,1,auto),none表示(0,0,auto) 注意: W3C鼓励使用flex的简写形式,因为flex在使用过程中会顺便初正确的重新设置没有确定的组件到常见用法。

  6. align-self: auto | flex-start | flex-end | center | baseline | stretch;

    该属性和容器的align-items属性有同样的作用,它是用在单一的项目上的,可以完全压倒容器中align-items定义的对齐方式。

    注意:auto 表示项目会使用父元素(容器)的align-items的值,如果该项目没有父元素的话align-self的值是stretch。

flex items值得注意的是:float、clear、vertical-align这些属性对于项目(flex item)会失效

© 著作权归作者所有

共有 人打赏支持
一诺_
粉丝 0
博文 3
码字总数 5963
作品 0
丰台
程序员
进一步了解flex布局—来实现这些常见布局吧

  flex布局具有便捷、灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结。 web页面布局(topbar + main + footbar) 示例代码   要实现的效果如下:...

LT_bear
05/29
0
0
CSS3 Flex布局(伸缩布局盒模型)学习

https://www.cnblogs.com/sxz2008/p/6635196.html 实例:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。 CSS3引入...

壹峰
08/08
0
0
css3最全flex布局结构整理

一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左...

韦姣敏
05/03
0
0
学习CSS3伸缩布局盒模型Flex布局

一、Flex 布局是什么? CSS3引入了一种新的布局模式——Flexbox布局,即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使它们的...

侠客有情剑无情QAQ
08/19
0
0
Flex弹性布局在移动设备上的应用

本文内容为整理摘录。 引文 首先,我们有表格布局。当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局。 然后是现在大多数人都在使用的浮动布局。我们可以...

yinyongcom666
2013/08/07
0
4

没有更多内容

加载失败,请刷新页面

加载更多

SingleNumber136 leetCode

Given a non-empty array of integers, every element appears twice except for one. Find that single one. Note: Your algorithm should have a linear runtime complexity. Could you im......

woshixin
22分钟前
0
0
String ,  StringBuffer ,  StringBuilder的区别

String , StringBuffer , StringBuilder的区别 String 首先,String 是用来表示一个字符串常量的,它是一个不可变对象,意味着,一旦我们创建了某个字符串之后,就不能再改变它的值了,我们可...

tsmyk0715
今天
2
0
区块链100讲:UTXO 和 Account 模型对比

在当前区块链世界中,主要有两种记录保存方式,UTXO 模式(Unspent Transaction Output) 和 Account 模式。Bitcoin 采用的是 UTXO 模型,Ethereum 采用的 Account 模型,同样 CITA 也采用了 ...

HiBlock
今天
1
0
Vue中路由管理器Vue Router使用介绍(三)

一、路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 { path:'/user/:id/:name', name:'user', component:()=>import('./views/User.vue') ...

tianma3798
今天
1
0
从ibdata文件恢复mysql数据

DROP TABLE 恢复【一】 Recover InnoDB dictionary Percona Data Recovery Tool 单表恢复

IT--小哥
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部