Posted in HTML / CSS onMay 12, 2016
Flexible Box(弹性盒子)能让页面的分布更合理和方便,
这是之前使用常规的布局方式所做不到的。
XML/HTML Code复制内容到剪贴板
- <div class="warp">
- <div class="modular">1</div>
- <div class="modular">2</div>
- <div class="modular">3</div>
- <div class="modular">4</div>
- </div>
display:flex和display:box有什么区别?
前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。
CSS Code复制内容到剪贴板
- /*父级*/
- .warp{
- width: 100%;
- height: 100px;
- /*这个是用来定义伸缩容器,是内联还是块取决于设置的值。*/
- /*这个时候,他的所有子元素将变成flex文档流,称为伸缩项目。*/
- /*-------------------------------------------------------------*/
- display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
- display: -moz-box; /* Firefox 17- */
- display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
- display: -moz-flex; /* Firefox 18+ */
- display: -ms-flexbox; /* IE 10 */
- display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
- /*-------------------------------------------------------------*/
- /*一起使用box-align 和 box-pack 属性,对子元素进行居中*/
- -webkit-box-pack:justify;
- -webkit-box-align: ustify;
- -moz-box-pack:justify;
- -moz-box-align:justify;
- box-pack:justify;
- box-align:justify;
- /*-------------------------------------------------------------*/
- /*定义了伸缩项目放置在伸缩容器的方向*/
- flex-direction:row;
- -webkit-flex-direction:row;
- /*定义伸缩容器里是单行还是多行显示*/
- flex-wrap:nowrap;
- /*flex-direction”和“flex-wrap”属性的缩写版本,默认row nowrap*/
- flex-flow:row nowrap;
- /*设置伸缩容器在横向方向上的对齐方式。*/
- justify-content:center;
- /*设置伸缩容器在纵向方向上的对齐方式。*/
- align-items:center;
- /*当伸缩容器的纵向还有多余空间时,可以用来调准伸缩容器横向在伸缩容器里的对齐方式*/
- align-content:center;
- }
- /*子级*/
- .warp .modular{
- width:80px;
- height:80px;
- background-color:#eee;
- text-align:center;
- /*设置伸缩项目出?的?序。*/
- order:-1;
- /*设置伸缩项目扩展的比例。*/
- flex-grow:1;
- /*设置伸缩项目收缩的比例。*/
- flex-shrink:2;
- /*设置伸缩项目的伸缩基准值。*/
- flex-basis:auto;
- /*flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写*/
- flex:1 2 100px;
- /*用来在单独的伸缩项目上覆写默认的对齐方式。*/
- align-self:center;
- }
直接上代码,写了个Demo便于理解,其中warp为父元素,称为“伸缩容器,modular为子元素,称为“伸缩项目”。
1) Flexbox布局最适合应用程序的组件和小规模的布局,而网格布局更适合那些更大规模的布局。
2) 目前没有浏览器支持 box-flex 属性,Firefox 支持替代的 -moz-box-flex 属性,Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
3) CSS的columns在伸缩容器上没有效果。
4) float、clear和vertical-align在伸缩项目上没有效果。
例:移动端导航(居中,左右,自适应居中,自适应竖向排列)
CSS Code复制内容到剪贴板
- <style type="text/css">
- .nav{
- background:#00BFFF;
- display:-webkit-box;
- display:-moz-box;
- display:-ms-flexbox;
- display:-webkit-flex;
- display:flex;
- -webkit-flex-flow:row wrap;
- /*自适应竖向排列*/
- -webkit-flex-flow:column wrap;
- /* 所有列面向主轴起始位置靠齐 */
- justify-content:flex-start;
- /* 所有列面向主轴终点位置靠齐 */
- justify-content:flex-end;
- }
- .nav a{
- text-decoration:none;
- display:block;
- padding:1em;
- color:#fff;
- /*居中平铺*/
- flex:1;
- }
- @media all and (max-width: 800px) {
- .nav{
- /* 所有列面向主轴两端位置平均分配 */
- justify-content:space-around;
- }
- }
- </style>
XML/HTML Code复制内容到剪贴板
- <ul class="nav">
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- </ul>
例:移动端常用自适应布局
CSS Code复制内容到剪贴板
- <style type="text/css">
- .wrapper{
- display:-webkit-box;
- display:-moz-box;
- display:-ms-flexbox;
- display:-webkit-flex;
- display:flex;
- -webkit-flex-flow:row wrap;
- flex-flow:row wrap;
- }
- .wrapper > *{
- padding:10px;
- flex:1 100%;
- }
- .header{
- background:#FF6347;
- }
- .footer{
- background:#90EE90;
- }
- .main{
- background:#00BFFF;
- }
- .aside-1{
- background:#FFD700;
- }
- .aside-2{
- background:#FF69B4;
- }
- @media all and (min-width: 600px) {
- .aside{
- flex:1 auto;
- }
- }
- @media all and (min-width: 800px) {
- .main{
- flex:3 0px;
- }
- .aside-1{
- order:1;
- }
- .main{
- order:2;
- }
- .aside-2{
- order:3;
- }
- .footer{
- order:4;
- }
- }
- </style>
XML/HTML Code复制内容到剪贴板
- <div class="wrapper">
- <header class="header">顶部</header>
- <article class="main">
- <p>我在中间显示的文字</p>
- </article>
- <aside class="aside aside-1">我在左边显示的文字</aside>
- <aside class="aside aside-2">我在右边显示的文字</aside>
- <footer class="footer">底部</footer>
- </div>
几个CSS3的flex弹性盒模型布局的简单例子演示
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@