CSS3 - 伸缩盒模型 Flexible Box Layout

gecko23 发布于2019-08-30 15:43 / 1201人阅读

摘要：比如此属性的默认值为，也就是忽略伸缩项的宽度，管你要多少住房面积，通通按照属性说好的分配，不许换行。，和上文提到的属性实际上是这三个属性的简写形式。

参考链接

使用 CSS3 Flexible Boxes 布局

菜鸟教程链接：http://www.runoob.com/css3/cs...

Flexible Box是什么？

Flexible意为可伸缩的，Box意为盒子，可以理解为一种新式的盒模型---伸缩盒模型。由CSS3规范提出，这是在原有的大家非常熟悉的 block, inline-block, inline 的基础上延伸出的新一代布局模式。

浏览器支持

伸缩盒基本概念

伸缩盒的最大特点或者说优点就在于它考虑到了现今高昂的房价和人民日益增长的住宅需求之间的矛盾，房屋面积是有限的，但是我们的伸缩盒能够最合理最高效地把房子分给大家。面积多了，就给大家伙多分点；面积小了，就让各位挤一挤少分点，总而言之不会让任何一个人露宿街头的（overflow）！

既然我们提到了房子和住户的关系，那么住户的排列自然需要沿一定的方向。对于块级元素来说，布局的延伸方向是自上而下的，也就是纵向。而对于行内元素来说，布局延伸方向是自左往右的，也就是横向。而伸缩盒呢，它的方向是可变的，既能纵向延伸，也能横向舒展，这取决于你的设置了。

伸缩盒模型基本术语

伸缩盒模型的思想和普通的块级元素和行内元素的布局思想有较大的不同，它引入了一些新的概念和术语，通过下面这张图来了解一下：

Flex container 伸缩盒容器
这就是用来分的房子，这是一间神奇的房子，要让它变得神奇，将display属性声明为 flex 或 inline-flex 即可~

Flex item 伸缩项
房子里的居民，他们都会占有自己应得的住房面积。

为了形象说明，我们用代码来解释。

    
      item 1
      item 2
      item 3

CSS设置为：

    .container {
      display: flex;
      width: 300px;
      height: 100px;
      ...
    }

在这里 display: inline-flex; 好像也可以。
对于其中的伸缩项元素，我们需要给他们事先安排好住房面积比例，我们就用最简单最健康的1:1:1吧~我们将比例声明在flex属性里：

    .item-1 {
      flex: 1;
      ...
    }
    .item-2 {
      flex: 1;
      ...
    }
    .item-3 {
      flex: 1;
      ...
    }

我们的大房子被完美地平分成三个隔间了，三家平分房租！

如果有人想住大点的房子，我们直接改变flex的比例即可：

    .item-1 {
      flex: 1;
      ...
    }
    .item-2 {
      flex: 1;
      ...
    }
    .item-3 {
      flex: 2;
      ...
    }

Axes 轴
我们可以看到，图中有两条轴，分别标注了主轴和次轴（垂直于主轴）。然而实际上哪一条是主轴并不确定，是由我们来规定的。

flex-direction 此属性规定哪条轴为主轴。

justify-content 此属性设置了伸缩项在主轴方向上的排列方式，这个稍后解释。

align-items 此属性和上面的justify-content相对，表示伸缩项在次轴上的排列方式。

align-self 此属性规定某一个特定的伸缩项元素在次轴上的布局方式，在某个元素上设置该属性会覆盖它的 align-items 属性。也就是这个属性会让某个元素更有个性，不走寻常路~

flex-direction
当我们不想沿着默认的方向分房子的时候，我们可以改变flex-direction属性的值来改变主轴和方向，该属性默认的取值为row；

    .container {
      flex: row-reverse;
      ...
    }

顾名思义，这会让伸缩项的排列方向反过来：

当此属性设置为column时，主次轴就会对调，元素的排列方向也会随之改变：

    .container {
      flex-direction: column;
      ...
    }

至于 flex: column-reverse 的含义就不用我多说了吧~

justify-contents
有的时候，大家挨着住，一点空隙都没有也会很难受，连个过道都没有，隐私也不能保证对吧。这个时候，我们可以改变分配政策了，不再按比例分配，而是定额分配，每个人的面积是确定的。多出的房屋面积改成公共区域。

    .item {
        width: 80px;
        ...
    }
    ...

设定了 width 属性后也要记得去掉 flex 属性的声明哦，不然flex属性的效果仍然会把 width 覆盖掉~
同时，如果width属性也不设定的话，元素宽度会表现为内容的宽度，which means 当伸缩项内部无内容时，将不会进行渲染，其表现就和 display: none; 一样。
这时，在容器上声明 justify-content 属性就可以安排伸缩项的位置了：

.content {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items
这项属性会改变次轴上元素排列的方式，对于本例来说原来次轴方向上元素的高度是表现为height: 100%;的，设定了align-items属性后，其高度表现就会发生改变了。

.content { align-items: flex-start | flex-end | center | baseline | stretch;}

说到这里了，伸缩项具体的表现其实可以想象出来了，想象不出来的就自己动手试一试吧~
order
在伸缩项上声明此属性，可以无视HTML结构的顺序而按照 order 从小到大的顺序沿 flex-direction 方向排列。比如：

.item-1 { order: 3; ...}.item-2 { order: 1; ...}.item-3 { order: 2; ...}

flex-wrap
此属性的默认值为 nowrap，也就是忽略伸缩项的宽度，管你要多少住房面积，通通按照 flex 属性说好的分配，不许换行。

.container { flex-wrap: nowrap | wrap | wrap-reverse}.item { width: 150px;}

flex-grow，flex-shrink 和 flex-basis
上文提到的 flex 属性实际上是这三个属性的简写形式。这三个属性有相似性，都是表示项与项之间分配空间的相对比例关系，不同之处在于：1. flex-grow 属性：属性值为该伸缩项所占空间相对于其他伸缩项（声明了 flex 相关属性的项）的比值。2. flex-shrink 属性：该伸缩项相对于其他伸缩项缩小的比值，也就是说当 flex-shrink: 3; 时，该项所占空间为其他项的1/3。3. flex-basis 属性：属性值为该项所占空间占容器空间的百分比。

注意：
对于 flex-basis 属性，当所有项的属性值相加<=100%时，会严格按照百分比值来渲染。当属性值相加>100%时，元素并不会溢出，而是表现为两两之间所占空间大小遵循相互的百分比比值。也就是说当存在三个伸缩项且 flex-basis 值都为50%时，表现行为与三个项均为 flex: 1; 一样。

Flexible Boxes 布局模式在响应式开发中尤其好用，对不同的终端，设置元素之间的空间分配关系将会变成一件非常简单的事。伸缩盒布局和响应式布局中流行的流体布局哪种更好，还是可以结合起来，需要开发者根据项目需求确定。

私有云专线服务盒模型盒模型html吗简述html盒模型 flexible

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

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

CSS3 - 伸缩盒模型 Flexible Box Layout

摘要：比如此属性的默认值为，也就是忽略伸缩项的宽度，管你要多少住房面积，通通按照属性说好的分配，不许换行。，和上文提到的属性实际上是这三个属性的简写形式。参考链接使用 CSS3 Flexible Boxes 布局菜鸟教程链接：http://www.runoob.com/css3/cs... Flexible Box是什么？ Flexible意为可伸缩的，Box意为盒子，可以理解为...

bingchen 2019-08-02 16:09 评论0 收藏0
使用 CSS3 Flexible Boxes 布局

摘要：对于块级元素来说，布局的延伸方向是自上而下的，也就是纵向。而对于行内元素来说，布局延伸方向是自左往右的，也就是横向。当属性值相加时，元素并不会溢出，而是表现为两两之间所占空间大小遵循相互的百分比比值。 Flexible Box是什么？Flexible意为可伸缩的，Box意为盒子，可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出，这是在原有的大家非常熟悉的block, inl...

boredream 2019-08-28 17:56 评论0 收藏0
WEB前端资源代码：CSS篇

摘要：误区注意只是动态分配父元素的剩余空间，而不是整个父元素的空间。默认值如果项目未设置高度或设为，将占满整个容器的高度。负值对该属性无效。高像素密度设备相应放大，像素密度设备相应缩小。css3新单位vw、vh、vmin、vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那...

番茄西红柿 2019-04-23 13:15 评论0 收藏0
移动端优先的flex三栏布局的使用方法

摘要：目前移动端的布局也都是用。弹性盒或，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列对齐和分配空白空间。 felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。这篇文章主要介绍了移动端优先...

leon 2019-08-23 13:52 评论0 收藏0
移动端优先的flex三栏布局的使用方法

摘要：目前移动端的布局也都是用。弹性盒或，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列对齐和分配空白空间。 felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。这篇文章主要介绍了移动端优先...

y1chuan 2019-06-28 16:52 评论0 收藏0