flex

文章目录

1. calc
2. FLEX
   1. 1. display: flex
   2. 2. flex 属性分类
   3. 具体属性介绍
      1. jusitify-content 主轴排列
      2. align-items 交叉轴排列
      3. align-self 的作用
      4. flex-wrap 的作用
      5. align-content
      6. flex-direction 的使用 及 align-items 方向问题
      7. 复合属性: flex-flow
      8. order 的使用
3. 1. flex-grow属性

1. flex-shrink属性
2. flex-basis属性
3. flex属性

3. margin在flex中的表现

1. 使用margin使元素居中
2. 使用margin实现 space-* 效果

calc

calc(expression) 函数用于动态计算长度值

• expression 必须，一个数学表达式，结果将采用运算后的返回值。
• 需要注意的是，+ - 运算符前后都需要保留一个空格(* / 例外了)，例如：width: calc(100% - 10px)
• 任何长度值都可以使用calc()函数进行计算
• calc()函数支持 “+”, “-“, “*”, “/“ 运算
• calc()函数使用标准的数学运算优先级规则

FLEX

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性，对于某些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

1. display: flex

• 每个弹性容器都有两根轴：主轴（横轴）和交叉轴（侧轴、纵轴），两轴之间成90度关系。注意：水平的不一定就是主轴。
• 每根轴都有起点和终点，这对于元素的对齐非常重要。
• 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
• 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

2. flex 属性分类

1. 容器属性
   • flex-flow
   • flex-direction
   • flex-wrap
   • justify-content
   • align-items
   • align-content
2. 弹性元素属性
   • order
   • flex-grow
   • flex-shrink
   • flex-basis
   • flex
   • align-self

具体属性介绍

jusitify-content 主轴排列

.box{
    justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly(实验属性);
}

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly：均匀排列每个元素，每个元素之间的间隔相等

---

align-items 交叉轴排列

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

align-self 的作用

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

---

flex-wrap 的作用

.box{
    flex-wrap: nowarp | wrap | wrap-reverse;
}
nowrap（默认值）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

---

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly

---

flex-direction 的使用 及 align-items 方向问题

.box{
    flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
注意： flex-direction 改为垂直方向时，jusitify控制垂直方向，align控制水平方向

---

复合属性: flex-flow

语法：flex-flow = flex-drection + flex-wrap
例如：flex-flow: row nowrap;

---

下面的属性都是加在子元素上面的，包括上面的 align-self 属性

---

order 的使用

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

.item {
  order: <integer>;
}

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。无多余宽度时，flex-grow无效。

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效

.item {
  flex-shrink: <number>; /* default 1 */
}

关于元素的收缩的计算方法：详情请参见

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex属性

它是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

除了以上两种取值方式外，flex后面跟其它值的情况：

• 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

• 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

• 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

• 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 200 300px;}
.item {
    flex-grow: 200;
    flex-shrink: 1;
    flex-basis: 300px;
}

3. margin在flex中的表现

在 flex 格式化上下文中，设置了 margin: auto 的元素，在通过 justify-content 和 align-* 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去 。需要注意的是：因为margin是将剩余空间分配给了元素，所以添加了margin后，justify-content 和 align-*属性就不能再被使用了。

使用margin使元素居中

<style>
    .box {
        display: flex;
    }
    .inner {
        margin: auto;  /* 水平/垂直居中 */
        /* margin: auto 0; align-items: center */
        /* margin-top: auto; align-items: flex-end */
    }
</style>

<div class="box">
	<div class="inner"></div>
</div>

使用margin实现 space-* 效果

<style>
    .box{
        display: flex;
        width: 800px;
        margin: 30px auto;
        border: 1px solid red;
    }
    li{
        margin: auto;
        font-size: 18px;
        line-height: 100px;
    }    
</style>

<ul class="box">
    <li>liA</li>
    <li>liB</li>
    <li>liC</li>
    <li>liD</li>
    <li>liE</li>
</ul>

/* space-around */
li{
    margin: 0 auto;
}

/* space-between */
li{
    margin: 0 auto;
}
li:first-child{
    margin-left: 0;
}
li:last-child{
    margin-right: 0;
}

/* space-evenly */
li{
    margin-left: auto;
}
li:last-child{
    margin-right: auto;
}