flex

发表于 | 分类于

Flexbox Overview

Flexbox 使用2种我们从未见过的盒子：flex containers & flex items 。flex container的任务是把一些flex items组合在一起，并决定如何定位它们。
任意HTML元素，如果作为flex container的直接子元素，就是一个item。
可以单独操作flex item，但大部分时候，都是由flex container决定item的布局的。flex items的主要目的是让container知道它需要定位多少元素。

You align a bunch of flex items inside a container, and, in turn, those items can serve as flex containers for their own items.

Flexbox Container

使用flexbox的第一步就是把一个html元素变为flex container.

1
2
3
.flex-container{
    display: flex;
}

Align A Flex Item

1
2
3
4
.flex-container{
    display: flex;
    justify-content:center; /* define the horizontal alignment of its items x轴怎么定位 */
}

这个和给想要居中的元素添加margin:0 auto的效果是一样的。通过容器控制子元素在flexbox中十分常见。这和我们之前定位盒子不一样。
justify-content的属性还有以下的值：

  • center
  • flex-start (align to the left)
  • flex-end (align to the right)
  • space around
  • space-between

Group Flex Items

flex containers只管如何定位它们的直接子元素，不管flex items里面的东西。

Cross-axis (Vertical) Alignment

给flex container添加align-items属性，来纵向定位flex items，即y轴如何定位元素。

1
2
3
4
.flex-container{
    display:flex;
    align-items:center; 
}

align-items和justify-content属性的值差不多：

  • center
  • flex-start (顶部开始 top)
  • flex-end (底部开始 bottom)
  • stretch (每个flex item高度拉伸到和flex container一样高，不管flex item包含多少内容，常用于创建内容不定的等高列)
  • baseline

Wrapping Flex Items(包裹flex items)

flexbox比基于浮动的grid布局更强大，因为它可以改变alignment,direction,order,甚至size。
使用flex-wrap属性创建grid。

1
2
3
4
.flex-container{
    display:flex;
    flex-wrap:wrap; /* 一行放不下，自动到下一行，和浮动布局差不多 */
}

但是呢，flexbox能控制多余的item如何排列。

1
2
3
4
5
.flex-container{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

Flex Container Direction(方向)

方向决定容器是如何渲染items的，横向或者纵向。
默认为横向，即为行。
将行变为列，只需要一行css代码:

1
2
3
4
.flex-container{
    display:flex;
    flex-direction:column;
}

这就将默认的行，变为了列。页面从grid变为了纵向的一列。
响应式设计的一个难点就是用同样的html标记展现给移动端用户和桌面用户，但大部分的移动端布局是单列的，而桌面布局则是横向堆积元素的。flex-direction 对于创建响应式布局超级有用～

排列注意事项

如果旋转了容器的方向，justify-content属性也会跟着旋转，它现在控制元素的纵向排列，而非横向。要在列中居中排列，使用align-items。

1
2
3
4
5
.flex-container{
    display:flex;
    flex-direction:column;
    align-items:center;
}

Flex Container Order(排序)

要让一个盒子显示在另一个之前，之前的方法是移动html标记的位置。flex-direction属性让我们可以控制这个显示的顺序。

1
2
3
4
5
6
7
.flex-container{
    display:flex;
    justify-content-center;
    flex-wrap:wrap;
    flex-direction:row-reverse;
    align-items:center;
}

Flex Item Order

之前都是通过父容器来定位flex items，但控制单个item也是可行的。
给一个flex item添加order属性，改变它在容器中的顺序，而不会影响到旁边的items。
它的默认值为0，增加或者减少这个值，使这个元素向右或者向左移动。

1
2
3
4
5
6
7
8
9
10
11
.flex-container{
    display:flex;
    align-items:center;
    flex-direction:row;
}
.first-item{
    order:1;
}
.last-item{
    order:-1;
}

上面的代码会让第一个元素和最后一个元素交换位置，即使它们不是处于同一行。这个和row-reverse,column-reverse不一样，它们不能跨行/列。

Flex Item Alignment

在flex item上设置align-self属性来覆盖在父容器上设置的align-items属性。
值和align-item一样：

  • center
  • flex-start (top)
  • flex-end (bottom)
  • stretch
  • baseline

Flexible Items

Flex items are flexible: they can shrink and stretch to match the width of their containers.
Compare this to the justify-content property, which distributes extra space between items. This is similar, but now we’re distributing that space into the items themselves. The result is full control over how flex items fit into their containers.

Flex Items And Auto-margins

Auto-margins eat up all the extra space in a flex container.

总结

  • 创建flex container: display:flex
  • 定义flex items的x轴排列： justify-confent
  • 定义flex items的y轴排列: align-items
  • 行变为列: flex-direction
  • 改变flex items的排列顺序: row-reverse 或 column-reverse
  • 自定义单个元素的顺序: order
  • 自定义单个元素的排列：align-self
  • 创建可以伸展和收缩的盒子：flex

小青蛙游戏

学习flex布局，这里有个好玩的小青蛙游戏，推荐给大家：
https://flexboxfroggy.com/

面试的时候为连align-items和justify-content都没有回答出来，明明五月的时候才用flex布局写了app项目。一首《凉凉》送给自己。继续努力。

参考链接：
https://internetingishard.com/html-and-css/flexbox/