flexbox指南（不支持display: flex时）

用户7293182

发布于 2022-01-20 18:05:29

7870

文章被收录于专栏：jQuery每日经典jQuery每日经典

|| 原文地址：https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox/

不幸的是，并不是每个人都有能够查看flexbox布局的浏览器/设备。这是一个cheatsheet风格的指南，提供了flexbox属性的向后兼容替代方案。

虽然本指南中的一些CSS看起来很明显，但我希望挑战flexbox的使用，并提供一些简单的解决方案来解决在它流行之前就存在的问题。

flex-direction

row

Displays items horizontally

.item {
  display: inline-block;
}

row-reverse

Displays items horizontally in reverse order

.container {
  direction: rtl;
}

.item {
  display: inline-block;
}

column

Displays items vertically

.item {
  display: block;
}

column-reverse

Displays items vertically in reverse order

.container, .item {
  transform: scaleY(-1);
}

.item {
  display: block;
}

Credit: Vincent Valentin

flex-wrap

nowrap

Squishes items to stop wrapping

.container {
  display: table;
}

.item {
  display: table-cell;
}

wrap

Wraps items when altogether wider than container

.item {
  display: inline-block;
}

wrap-reverse

Wraps items in reverse order when altogether wider than container

.container, .item {
  transform: scaleY(-1);
}

.item {
  display: inline-block;
}

justify-content

flex-start

Horizontally aligns items to start of container

.item {
  display: inline-block;
}

flex-end

Horizontally aligns items to end of container

.container {
  text-align: right;
}

.item {
  display: inline-block;
}

center

Horizontally aligns items to center of container

.container {
  text-align: center;
}

.item {
  display: inline-block;
}

space-between

Spaces items between start and end of container

.container {
  text-align: justify;
}

.container:after {
  content: '';
  display: inline-block;
  width: 100%;
}

.item {
  display: inline-block;
}

Note: This method only works with uncompressed HTML and requires a fixed height on the container

space-around

Spaces items with equidistant space

.container {
  display: table;
}

.item {
  display: table-cell;
  text-align: center;
}

align-items

flex-start

Vertically aligns items to start of container

.item {
  display: inline-block;
}

flex-end

Vertically aligns items to end of container

.container {
  display: table;
}

.item {
  display: table-cell;
  vertical-align: bottom;
}

center

Vertically aligns items to center of container

.container {
  display: table;
}

.item {
  display: table-cell;
  vertical-align: middle;
}

stretch

Vertically stretches items from start to end of container

.item {
  display: inline-block;
  height: 100%;
}

align-content

flex-start

Vertically aligns items to start of container

.item {
  display: inline-block;
}

flex-end

Vertically aligns items to end of container

.container {
  display: table-cell;
  vertical-align: bottom;
}

.item {
  display: inline-block;
}

center

Vertically aligns items to center of container

.container {
  display: table-cell;
  vertical-align: middle;
}

.item {
  display: inline-block;
}

flex items

flex-grow

Grows an item to fill remaining space

.container {
  display: table;
}

.item {
  display: table-cell;
}

.item.grow {
  width: 100%;
}

flex-shrink

Shrinks an item and other items fill remaining space

.container {
  display: table;
}

.item {
  display: table-cell;
}

.item.shrink {
  width: 1px;
}

align-self

Shrinks an item and other items fill remaining space

.container {
  display: table;
}

.item {
  display: table-cell;
}

.item.bottom {
  vertical-align: bottom;
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-07-12，如有侵权请联系 cloudcommunity@tencent.com 删除

css

网站

本文分享自 jQuery每日经典微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

网站

登录后参与评论

0 条评论

热度