Php弹性盒子属性,弹性盒子模型详解

一、前言

由于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.弹性子元素属性

五、属性详解

学习方式二：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)第一篇自己原创的文章，希望大神看到多加提点。

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

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