它之所以被称为flexbox，是由于它能够裁减和收缩flex容器内的元素，以最大限制地填充可用空间 。与以前规划模式（如table规划和浮动元素内嵌块元素）相比，Flexbox是一个更弱小的模式：

一、基本概念

驳回Flex规划的元素，称为Flex容器（flexcontainer），简称容器。它的一切子元素智能成为容器成员，称为Flex名目（flexitem），简称名目。

在Flexbox模型中，有三个外围概念：–flex项（注：也称flex子元素），须要规划的元素–flex容器，其蕴含flex项–陈列方向（Direction），这选择了flex项的规划方向

二、容器属性

2.1flex-direction:

2.2flex-wrap:

2.3justify-content:

2.4align-items:

2.5align-content:

定义了多根轴线的对齐模式，假设名目只要一根轴线，那么该属性将不起作用

联合justify-content和align-items，看看在flex-direction两个不同属性值的作用下，轴心有什么不同：

三、名目属性

3.1order属性

3.2flex-grow属性

属性定义名目标加大比例，默以为，即假设存在残余空间，也不加大。

假设一切名目标属性都为1，则它们将等分残余空间（假设有的话）。假设一个名目标属性为2，其余名目都为1，则前者占据的残余空间将比其余项多一倍。

3.3flex-shrink属性

flex-shrink属性定义了名目标增加比例，默以为1，即假设空间无余，该名目将增加。

.item{flex-shrink:;/*default1*/}

假设一切名目标flex-shrink属性都为1，当空间无余时，都将等比例增加。假设一个名目标flex-shrink属性为0，其余名目都为1，则空间无余时，前者不增加。

负值对该属性有效。

3.4align-self属性

align-self属性准许单个名目有与其余名目不一样的对齐模式，可笼罩align-items属性。自动值为，示意承袭父元素的align-items属性，假设没有父元素，则同等于。

.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}

弹性规划自动不扭转名目标宽度，然而它自动扭转名目标高度。假设名目没有显式指定高度，就将占据容器的一切高度。

标签： 厦门专业网页设计、 厦门网站提升、 网站制造、 厦门专业网站树立、 厦门网站树立、 网页设计、 网站设计、 flex、 网站保养、 网站开发、 网站树立、 厦门网站提升、 厦门网站制造、 网站设计、 display、 网站制造、 网站树立之弹性规划、 网站树立、 属性详解、

本文地址： https://yihaiquanyi.com/article/70ca58a596c75c2f448f.html

上一篇：t桖变形变形和transformtransform...
下一篇：网站制造软件手机版下载网站制造CSS3网站树...