这个主要是学习http://www.w3cplus.com/css3/a-guide-to-flexbox.html这里的文章,做个记录,以备日后查询。
flex让容器有能力使得其中的子项目自由布局,充分利用空间。
比较适合应用程序的组件和小规模布局
flex包括容器 和 子项目两部分。
对容器来说,有以下属性可用。
display: other values | flex | inline-flex;
columns, float, clear和text-align在伸缩容器上无效
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch
align-item主要给出侧轴上的对齐方式,默认是stretch,拉伸以填充
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content为了给出在多行的情况下,多行之间的对齐方式
子项目可用属性如下
order: <integer>
flex-grow: <number> (默认值为: 0)
flex-shrink: <number> (默认值为: 1)
flex-basis: <length> | auto (默认值为: auto)
flex-grow,flex-shrink给出的是子项目对剩余空间分配所占的份额,负值同样有效. flex-basis也是剩余空间分配比率,负值不合法
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex的后两个可选,默认是0 1 auto
align-self: auto | flex-start | flex-end | center | baseline | stretch
align-self用来在单独的伸缩项目上覆写对齐方式
兼容低版本的写法
flex容器
.flexbox{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-fles-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
flex项目
.flexitem { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }
在谷歌浏览器下测试,子项目,如果为直接设置width:200px,则在一行显示。如果同时设置min-200px; max-200px;则显示两行,情况不同
虽然有那么几种写法方案,依然没有完全的支持换行和居中,谁有好用的呀