如何正确使用 FLEX-BOX

2019年9月14日 144次阅读 来源: MuffinDots

“Flex-box”（全称：CSS Flexible Box Layout Module）是css3中新的布局方式。它可以实现弹性布局，尤其运用在响应式设计中，配合media query可以为布局带来很多新的可能。

Flex-box模型的核心在于内含item的尺寸是可以是弹性的。container可以根据本身尺寸的变化来动态地调整item的尺寸。当container有空白空间时，item可以扩展尺寸以占据额外的空间；当容器中的空间不足时，item可以缩小尺寸。类似于table中的td，大大简化了因浏览器大小的变化二对内容布局进行的调整。

使用方式

flex-box由外层容器flex container和子元素flex item组成。使用时，只要将外层容器container 的“display”设置为”flex”，里面的元素自动变成flex item。

《如何正确使用 FLEX-BOX》



<div class=”flex-container”>
    <div class=”flex-item”></div>
    <div class=”flex-item”></div>
    <div class=”flex-item”></div>
</div>



.flex-container{display:flex;}

基本属性

1. flex container属性

flex-direction

  • row（默认值)：从左到右水平方向排列；
  • row-reverse：从右到做水平方向排列；
  • column：从上到下垂直方向排列；
  • column-reverse：从下到上垂直方向排列。

flex-wrap

  • nowrap（默认值）：强制一行；
  • wrap：自动换行；
  • wrap-reverse：与 wrap 的含义类似，但下一行的位置排序方向与主方向相反。

flex-flow 将以上两种属性结合，如flex-flow: row wrap //即容器中的元素按水平方向排列，自动换行。

justify-content 用于分配container填充item后所剩余的空间。

  • flex-start：item从起始位置依次排列。例如123▇ ▇ ▇ ▇；
  • flex-end：item从结束方向依次排列。例如▇ ▇ ▇ ▇321；
  • center：item居中排列，例如 ▇ ▇123▇ ▇；
  • space-between：空白空间在item之间平均分配，如1▇ ▇2▇ ▇3；
  • space-around：类似space-between，但item距边距也有空白，如▇1▇2▇3▇。

align-items 用于设置对齐方式，如果为横向排列时，其属性可以这样理解

  • flex-start：上对齐；
  • flex-end：下对齐；
  • center：居中对齐；
  • stretch：拉伸对齐，（但内含item的高度需设置成auto）。

align-content属性与justify-content一致，用于行的控件排列。

2. flex-item属性

外层flex container控制是子元素的排列方式与对齐方式，内含的子元素flex item可以通过定义具体的width和height，也可以通过缩放来控制自身的尺寸。

flex-basis 类似width属性，用于确定item初始的尺寸

flex-grow 默认值为1，”flex-grow”属性的值表示的是当container有多余的空间时，不同item所获得空间的比例。比如，一个container中有 3 个item，其”flex-grow”属性的值分别为 1，2 和 3，那么当container中有剩余空间时，这 3 个条目所获得的空白空间分别占全部空间的 1/6、1/3 和 1/2。

flex-shrink 与flex-grow相反，表示的是当container的空间不足时，各个条目的尺寸缩小的比例。

flex 以上三个属性的结合。格式是”none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]”。该属性的值的 3 个组成部分的初始值分别是”0 1 auto”。当属性”flex”的值为 none 时，相当于”0 0 auto”。当组成部分”flex-basis”被省略时，其值为 0%。

例子



<div class=”flex-container”>
    <div class=”flex-item1”></div>
    <div class=”flex-item2”></div>
    <div class=”flex-item3”></div>
</div>




.flex-item1{
  width：100px;
}
.flex-item2{
  flex:2; /*flex-grow 的值为 1，flex-shrink 的值为 1，flex-basis 的值为 0%*/
}
.flex-item3{
  flex:1;
}

效果为item1为100px,剩余空间item2与item3的比为2：1

兼容性

flex-box这些年来调整了三次，带来了很多兼容性的问题

  • 新规范：2013年最新版本规范的语法，即”display: flex”
  • 中间版本：2011 年的非官方规范的语法，即”display: flexbox”
  • 老规范：2009 年的规范的语法，即”display: box”
Chrome：21+（新）20-（老）
Safari： 6.1+（新）3.1+（老）
Firefox：22+（新）2-21（老）
IE：10（中间）
Android: 4.4+（新）2.1+（老）
iOS: 7.1+（新) 3.2+（老）

所以在开发时，并不能简单的使用，必须新老规范一起用，才能完整的实现这个功能。

.flex-container{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6*/
  display: -moz-box;         /* OLD - Firefox 22- */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome 20-,Android 2.1-4.3 */
  display: flex;             /* NEW */
}
.flex-item{
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 22- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW*/
} 
/*不同情况下需要添加显性的宽度，才能防止老语法下的浏览器崩溃。*/

这才算是正确使用flex-box，可以在几乎所有的浏览器下运行良好，当然除了万恶的IE：）

参考文章

如有错误，还请轻轻拍砖。：）

    原文作者：MuffinDots
    原文地址: https://segmentfault.com/a/1190000002778442
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞