弹性盒子模型详解

rozbo 发布于2019-08-28 18:27 / 2735人阅读

摘要：二弹性盒模型历史弹性盒模型历史英文原版或者查看中文翻译版另外附上标准文档弹性盒模型在过去几年间制定了三版草案规范。给子元素直接添加属性即可七后话以上是本文所有内容，以下是小白我的感慨。

一、前言

由于W3C在制定弹性盒模型内容有多版草案，在网上浏览了很多视频和文章，版本有新有旧，所以准备写一篇关于弹性盒模型的文章，一是辅助自己学习，二是帮忙其他前端学习者更容易地弹性盒模型。

二、弹性盒模型历史

弹性盒模型历史英文原版或者查看中文翻译版
另外附上w3c css3-flexbox标准文档

弹性盒模型在过去几年间W3C制定了三版草案(规范)。

如果你看到了display:box;或者“box-{*}属性，那么你看的正是2009年版本的Flexbox。

如果你看到了display:flexbox;或者“flex()函数，那么你看的正是2011年版本的Flexbox。

如果你看到了display:flex;和flex-{*}属性，那么你查看的是当前（在写此文时）的规范。

本文将以display:flex;书写。

三、兼容性

使用兼容性查询网站Can I Use查询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）第一篇自己原创的文章，希望大神看到多加提点。

我之后会努力更新原创文章，并以我自己的风格（只留下原创的部分，多引入其他大神文章的精粹内容，给读者更清晰的思路）去展示。

如对我的文章感兴趣，请关注微信公众号“每日前端”，每天分享一篇优质前端文章。

服务器托管云服务器盒子模型比价盒子盒子比价电视盒子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111241.html

解剖CSS布局原理

摘要：前言本文将带你重新认识布局，带你解剖布局原理，前提是你要有基础本文将解除你在布局方面的疑惑。以下将对布局元素和文档流进行详细讲解。而且还能保持文档流，这是其他元素做不到的。前言本文将带你重新认识CSS布局，带你解剖布局原理，前提是你要有基础！本文将解除你在布局方面的疑惑。认识每个布局元素，了解他们的特性，你才知道为什么会是这样的结果。本文内容纯属个人理解，不代表官方。此文主要为理...

李文鹏 2019-08-29 12:28 评论0 收藏0
前端面试题整理

摘要：写在前面本小菜鸡开学其实已经开始了就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题。而有着固定的大小，高度超过规定高度就会出现滚动条。实现页面加载进度条我们可以将一整个页面大致分为，个区域。写在前面本小菜鸡开学(其实已经开始了)就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题= =。悔不该当初没有好好学...

wall2flower 2019-08-30 13:58 评论0 收藏0
前端面试题整理

摘要：写在前面本小菜鸡开学其实已经开始了就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题。而有着固定的大小，高度超过规定高度就会出现滚动条。实现页面加载进度条我们可以将一整个页面大致分为，个区域。写在前面本小菜鸡开学(其实已经开始了)就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题= =。悔不该当初没有好好学...

YuboonaZhang 2019-08-26 11:48 评论0 收藏0
前端面试题整理

摘要：写在前面本小菜鸡开学其实已经开始了就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题。而有着固定的大小，高度超过规定高度就会出现滚动条。实现页面加载进度条我们可以将一整个页面大致分为，个区域。写在前面本小菜鸡开学(其实已经开始了)就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题= =。悔不该当初没有好好学...

LdhAndroid 2019-08-01 18:37 评论0 收藏0