我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔在本文中,说明一下在实际应用中,使用flex弹性盒子模型的最常见的使用场景。flex弹性盒子的应用常见非常多。但是,实际的网页技术里面,大多数都是用不到的。所以,在本文中,苏南大叔就致力于展示最简单常见的几种使用场景了。

苏南大叔:网页css布局,flex弹性盒子模型的常见使用场景 - css-flex-demo
网页css布局,flex弹性盒子模型的常见使用场景(图4-1)

本文测试环境:mac/chrome@75.0.3770.100

基本代码

html角度上来说的话,flex布局和传统的box布局是没用啥区别的。

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <!-- ... -->
  <div class="item">n</div>
</div>

常见使用场景

基本的html结构都是如上所示,区别就是css不同。而这个flex盒子模式,一般来说需要设置的css有两部分。一部分是设置在box容器上面的,一部分是设置在item元素上面的。而关于下面的那个常见demo来说,也就用到了flex的一个方向flex-direction基本属性。

图片列表横向row布局(水平均分)

苏南大叔:网页css布局,flex弹性盒子模型的常见使用场景 - flex-auto
网页css布局,flex弹性盒子模型的常见使用场景(图4-2)

.box{
  display:flex;
  flex-direction:row;
}
.item{
  flex:auto;
}

图片列表横向row布局(折行)

display:flex;
flex-direction:row;

苏南大叔:网页css布局,flex弹性盒子模型的常见使用场景 - flex-demo-row
网页css布局,flex弹性盒子模型的常见使用场景(图4-3)

.box{
  display:flex;
  flex-direction:row;
  width:302px;
  height:302px;
  flex-wrap:wrap;
  background:blue;
}
.item{
  background:red;
  width:98px;
  height:98px;
  display:block;
  text-align:center;
  line-height:98px;
  font-size:36px;
  color:white;
  margin-top:2px;
  margin-left:2px;
}

文字列表纵向column布局

display:flex;
flex-direction:column;

苏南大叔:网页css布局,flex弹性盒子模型的常见使用场景 - flex-demo-column
网页css布局,flex弹性盒子模型的常见使用场景(图4-4)

.box{
  display:flex;
  flex-direction:column;
  width:302px;
  height:302px;
  background:blue;
}
.item{
  display:block;
  background:red;
  width:298px;
  height:40px;
  line-height:40px;
  font-size:22px;
  color:white;
  margin-top:2px;
  margin-left:2px;
  text-indent:8px;
}

总结

本文中,苏南大叔从实用角度上对flex盒子模型的常见使用场景进行了分析。并没有详细讲述各个属性的具体使用方法。因为flex的那些玄乎乎的高大上属性,其实平时也用不到。

本文的例子不是很好,flex子元素如果设置了宽度和高度,就似乎失去了flex的灵魂所在,大家请辩证的来看本文的例子。

不过,在未来的文章中,苏南大叔将会对flex的更多属性进行讲述。欢迎大家点击下面的链接,查看更多详细经验文字:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css    flex