CSS布局-Flex

最新推荐文章于 2024-08-02 20:34:24 发布

dise8262

最新推荐文章于 2024-08-02 20:34:24 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/dise8262/article/details/90709941

版权

flex布局，也称为flex弹性布局,主要目的是使item的宽度、高度按一定顺序填充父容器的可用空间。

使用Flexbox进行简单布局

// CSS
.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

使用Flexbox的花式布局

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

在这里插入图片描述

使用Flexbox进行居中

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}