什邡做网站

• 首页
• 关于我们
• 服务项目
  

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

  教育培训网站建设
• 小程序开发
• 案例展示
  

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

  系统平台
• 建站知识
• 联系我们

咨询热线 ：

028-86922220

CSS设置为：

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

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

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

CSS Code复制内容到剪贴板

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

是不是很方便？

Axes 轴
我们可以看到，图中有两条轴，分别标注了主轴和次轴（垂直于主轴）。然而实际上哪一条是主轴并不确定，是由我们来规定的。
1. flex-direction 此属性规定哪条轴为主轴。
2. justify-content 此属性设置了伸缩项在主轴方向上的排列方式，这个稍后解释。
3. align-items 此属性和上面的justify-content相对，表示伸缩项在次轴上的排列方式。
4. align-self 此属性规定某一个特定的伸缩项元素在次轴上的布局方式，在某个元素上设置该属性会覆盖它的align-items属性。也就是这个属性会让某个元素更有个性，不走寻常路~

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

CSS Code复制内容到剪贴板

1. .

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

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

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

CSS Code复制内容到剪贴板

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

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

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

说到这里了，伸缩项具体的表现其实可以想象出来了，想象不出来的就自己动手试一试吧~

order
在伸缩项上声明此属性，可以无视HTML结构的顺序而按照order从小到大的顺序沿flex-direction方向排列。比如：

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

1. .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布局模式在响应式开发中尤其好用，对不同的终端，设置元素之间的空间分配关系将会变成一件非常简单的事。

上述就是小编为大家分享的如何使用CSS3中的FlexibleBoxes了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

行业新闻 建站学堂 常见问题

联系我们

公司地址 人才招聘

成都 什邡



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：德阳市什邡市顺河路物华南苑B区

友情链接： 绵阳电信机房   成都成品网站   成都网站设计   成都添翼二手车   达州托管服务器   攀枝花网站建设   zjjierui.cn   数码快印   标识标牌制作   tpbzx.cn   

版权所有：青羊区美图云海设计工作室（个体工商户） 蜀ICP备2025119305号-5