一、前言
由于W3C在制定弹性盒模型内容有多版草案,在网上浏览了很多视频和文章,版本有新有旧,所以准备写一篇关于弹性盒模型的文章,一是辅助自己学习,二是帮忙其他前端学习者更容易地弹性盒模型。
二、弹性盒模型历史
弹性盒模型在过去几年间W3C制定了三版草案(规范)。
如果你看到了display:box;
或者“box-{*}
属性,那么你看的正是2009年版本的Flexbox。
如果你看到了display:flexbox;
或者“flex()
函数,那么你看的正是2011年版本的Flexbox。
如果你看到了display:flex;
和flex-{*}
属性,那么你查看的是当前(在写此文时)的规范。
本文将以display:flex;
书写。
三、兼容性
四、基础知识
弹性容器(flex container)
弹性子元素(flex item)
主轴(弹性子元素沿着主轴方向排列);侧轴(垂直于主轴方向)
主轴起点(main start);主轴终点(main end);主轴起点(cross start);主轴起点(cross end);
display:flex;
为块级弹性元素display:inline-flex;
为行内弹性元素
五、属性简介
1.弹性容器属性(图中内容关系:属性-属性值)
2.弹性子元素属性
五、属性详解
学习方式一(推荐):css flexbox试验场
学习方式二:flex属性指南(先看目录,直接选择对应属性查看即可)
六、使用
使用flexbox只需要在父元素上设置display属性即可。
.flex-container {
display: -webkit-flex; /* Safari */
display: flex;
flex-direction:row;
......
}
如果您想让它以内联方式显示,则
.flex-container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
flex-direction:row;
......
}
#注意:仅仅需要在父元素上设置这一个属性即可,它的子元素会自动变成flex items。
给子元素直接添加属性即可
.flex-item{
flex:1 1 auto;
......
}
七、后话
以上是本文所有内容,以下是小白我的感慨。
这是本小白(Vagor)第一篇自己原创的文章,希望大神看到多加提点。
我之后会努力更新原创文章,并以我自己的风格(只留下原创的部分,多引入其他大神文章的精粹内容,给读者更清晰的思路)去展示。
如对我的文章感兴趣,请关注微信公众号“每日前端”,每天分享一篇优质前端文章。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。